Differences between defaultDate option vs setDate method

Question

I am trying to get my head around using jQueryUI DatePicker. One of the main things I must understand is the way a date can be set on page load.

After doing some research, I found 2 different ways to do this:

1. using defaultDate option
2. using setDate method

The main difference I found out so far is that the defaultDate option only sets the value in the datePicker calendar itself.

Whereas the setDate method sets both the date in the input type text & in the datePicker calendar itself.

One interesting thing is that when using setDate method & defaultDate option simultaneously, the date set using setDate method overrides the value of the date set using the defaultDate option.

see http://jsfiddle.net/vb7mu3sf/

Another couple of differences I noticed:

• both accepts the date as a Date type as a parameter (which is very neat) but defaultDate option accepts additional types (Number & String).
• setDate method can of course be called at anytime on the datePicker

Is there anything else I missed about their differences?

Resources:

• http://api.jqueryui.com/datepicker/#option-defaultDate
• http://api.jqueryui.com/datepicker/#method-setDate
• jQuery-UI datepicker default date

Answer 1

Have a look at the documentation:

defaultDate
Set the date to highlight on first opening if the field is blank.

setDate
Sets the date for the datepicker.

There is not much left to explain. As mentioned above:

• Setting the defaultDate property:
  • Sets the date that is focused when the calendar opens and the field is blank.
  • Does not update the field.
  • User has to hit enter or click a date in order to update the field.
• Calling the setDate method:
  • Updates the field.
  • Opening the calendar when the field is not-empty causes that date to be focused and selected.

Possible uses of one technique or the other:

• If the date is a mandatory field -and- there is a default value then use the setDate method. This saves two clicks if the user is OK with the pre-entered date.
• Otherwise, use the defaultDate to specify the date that is focused should the user choose to activate the datepicker.

---

Notes:

... but defaultDate option accepts additional types (Number & String).

Actually, setDate accepts all versions of date that defaultDate does.

setDate method can of course be called at anytime on the datePicker

Well, the defaultDate option can be set anytime as well. For example, if there are two calendars e.g. checkin and checkout and the user chose a checkin date Nov 10, 2014 then you would want to set the defaultDate on the other calendar to be Nov 11, 2014.