How to Change Date Format in jQuery UI Date Picker

jQuery is a popular library based on jQuery that provides tons of useful plugins to quickly add UI elements to your websites and apps. Among them, jQuery Date Picker is a popular plugin that allows users to easily pick dates by clicking on a date calendar. It comes with a default date format but sometimes you may need to customize it as per your requirement. In this article, we will learn how to do this easily.

How to Change Date Format in jQuery UI Date Picker

Let us say you have added datepicker to div with id=’myDate’. You can easily change the format of date in date picker, with the following command.

var date = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();

We basically pass the dateFormat option to datepicker() function to set it.

{ dateFormat: 'dd-mm-yy' }

You can change the dateformat by changing the datestring. Here is another example to set date format.

{ dateFormat: 'dd-mm-yyyy' }

If you are using an old version of jQuery UI, you may need to use format option instead of dateFormat option.

{ format: 'dd-mm-yy' }
var date = $('#datepicker').datepicker({ format: 'dd-mm-yy' }).val();

In this article, we have learnt how to change date format in jQuery UI date picker.

Also read:

How to Fix NGINX bind to 0.0.0.0:80 Failed Error
How to Fix NGINX Unable to Load SSL Certificate
How to Detect Touchscreen Device in JavaScript
How to Fix Server Quit Without Updating PID File MySQL Error
How to Change Apache Config Without Restarting