The datepicker () Method

The datepicker () method can be used in two forms:

  • $(selector, context).datepicker (options)

  • $(selector, context).datepicker ("action", params)

The datepicker (options) Method

The datepicker (options) method declares that an <input> element (or <div> or <span>, depending on how you choose to display the calendar) should be managed as a datepicker. The options parameter is an object that specifies the appearance and behavior of the calendar. It can also specify the format for displaying dates in different countries.

Managing the appearance and visual effects associated with the calendar

The options listed in Table 8-1 allow us to set the appearance of the calendar.

Table 8-1. Options for managing the appearance of the calendar




Integer that indicates which day begins a week on the calendar. The value 0 corresponds to Sunday (default).


Number of months displayed at the same time in the calendar. For example, a value of 3 indicates the calendar will display three consecutive months.

If it is indicated as an array, it is the number of rows and columns of months displayed. For example, [3, 2] for displaying six months, three on each line. The default is 1 (a single month).


If the first of the month does not fall on the day indicated in options.firstDay, unused cells at the beginning and end of the month can display days from the previous or following months.

The default value is false (days from ...

Get jQuery UI now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.