Setting Default Dates in jQuery UI DatePicker

Introduction

jQuery UI DatePicker is a widely used plugin for selecting dates from a calendar. In many applications, it is necessary to set default dates for date fields, such as today's date or a date offset by a certain number of days. This article, based on the best answer from Stack Overflow, explains how to correctly set default dates using jQuery UI DatePicker.

Methods for Setting Default Dates

jQuery UI DatePicker provides two main ways to set the default date: using the defaultDate option during initialization, or using the setDate method after initialization.

For today's date, you can use new Date() to get the current date.

For relative dates, such as 15 days from today, you can use a number, e.g., 15, which represents 15 days from the current date.

Code Examples

The following code demonstrates how to set default dates for two date fields: the first field to today and the second field to 15 days from today.

// Initialize the first date field with default as today
$("[name=trainingStartFromDate]").datepicker({
    dateFormat: 'dd-mm-yy',
    changeYear: true,
    defaultDate: new Date()
});

// Initialize the second date field with default as 15 days from today
$("[name=trainingStartToDate]").datepicker({
    dateFormat: 'dd-mm-yy',
    changeYear: true,
    defaultDate: 15
});

// Alternatively, use the setDate method
// $("[name=trainingStartFromDate]").datepicker("setDate", new Date());
// $("[name=trainingStartToDate]").datepicker("setDate", 15);

Other Related Options

Besides defaultDate, DatePicker offers other options such as dateFormat for setting the date format, and changeYear to allow year selection. From the reference article, additional features like localization and theming can be explored.

Conclusion

By utilizing the defaultDate option or the setDate method, developers can easily set default dates in jQuery UI DatePicker. It is recommended to set defaults during initialization for a better user experience.