Working with jQuery UI Datepicker: Formatting Dates

The jQuery UI Datepicker is a powerful and flexible widget that allows users to select dates from a calendar. One of its key features is the ability to customize the date format, which can be useful for various applications such as form validation, data processing, and display purposes. In this tutorial, we will explore how to work with the jQuery UI Datepicker’s date formatting options.

Initializing the Datepicker

To start using the Datepicker widget, you need to include the jQuery UI library in your HTML file and initialize the widget on a target element. Here is an example of how to do it:

$(function() {
    $("#datepicker").datepicker();
});

And the corresponding HTML code:

<div id="datepicker"></div>

Setting the Date Format

The Datepicker widget provides a dateFormat option that allows you to specify the format for parsed and displayed dates. You can set this option when initializing the widget or later using the option method.

Here is an example of how to initialize the Datepicker with a specific date format:

$(function() {
    $("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' });
});

In this example, the dateFormat option is set to 'dd-mm-yy', which means that the date will be displayed in the format "day-month-year" (e.g., 25-08-2022).

You can also use other date formats by changing the value of the dateFormat option. Here are some common date formats:

• dd-mm-yy: day-month-year
• mm-dd-yy: month-day-year
• yy-mm-dd: year-month-day

Getting and Setting the Date Format

You can also get or set the dateFormat option after initializing the widget using the option method. Here is an example:

// Get the current date format
var dateFormat = $("#datepicker").datepicker("option", "dateFormat");

// Set a new date format
$("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd');

Formatting Dates Programmatically

Sometimes, you may need to format dates programmatically, such as when retrieving the selected date or setting a specific date. The Datepicker widget provides a formatDate function that allows you to format dates according to a specified format.

Here is an example of how to use the formatDate function:

var date = $("#datepicker").datepicker('getDate');
var formattedDate = $.datepicker.formatDate('dd-mm-yy', date);

In this example, the getDate method is used to retrieve the selected date, and then the formatDate function is used to format the date according to the specified format ('dd-mm-yy').

Conclusion

Working with dates in jQuery UI Datepicker can be straightforward once you understand how to use the dateFormat option and the formatDate function. By following the examples in this tutorial, you should be able to customize the date format of your Datepicker widget and perform common date formatting tasks programmatically.