The jQuery UI library provides effects, utilities, and themeable widgets that can add interactivity to your webpage. The Datepicker widget is a part of jQuery UI; it allows you to select a date from a popup/inline calendar. The following examples demonstrate some advance uses of the datepicker widget.
- Parse and Format Dates
- Set Date on Page Load
- Disable Specific Dates
- Style (or Highlight) Specific Dates
- Internationalization and Localization
- Update Datepicker Using AJAX
- Using Datepicker to Select Date Range
Parse and Format Dates
Datepicker provides two utility functions for converting a date string into JavaScript Date and vice-versa:
$.datepicker.parseDate( format, value[, settings] )$.datepicker.formatDate( format, date[, settings] )
The following example uses the onSelect event to parse and format the selected date in specific formats. The selected date is converted to a date object for calculation; then converted back to another date format:
These parseDate and formatDate functions; and the dateFormat option accepts the following format specifiers:
d- day of month (no leading zero)
dd- day of month (two digit)
o- day of year (no leading zeros)
oo- day of year (three digit)
D- day name short
DD- day name long
m- month of year (no leading zero)
mm- month of year (two digit)
M- month name short
MM- month name long
y- year (two digit)
yy- year (four digit)
@- Unix timestamp (ms since 01/01/1970)
!- Windows ticks (100ns since 01/01/0001)
'...'- literal text
''- single quote
Also, $.datepicker namespace defines the following standard date formats:
ATOM- 'yy-mm-dd' (RFC 3339/Same as ISO 8601)
COOKIE- 'D, dd M yy'
ISO_8601- 'yy-mm-dd'
RFC_822- 'D, d M y' (RFC 822)
RFC_850- 'DD, dd-M-y' (RFC 850)
RFC_1036- 'D, d M y' (RFC 1036)
RFC_1123- 'D, d M yy' (RFC 1123)
RFC_2822- 'D, d M yy' (RFC 2822)
RSS- 'D, d M y' (Same as RFC 822)
TICKS- '!'
TIMESTAMP- '@'
W3C- 'yy-mm-dd' (Same as ISO 8601)
Set Date on Page Load
Attaching datepicker to an input box does not automatically populate or update it. Use the setDate method for this:
Disable Specific Dates
Datepicker can be configured to disallow selection of certain dates using the beforeShowDay method. In the following example, dates 10 to 23 of the current month are disabled:
Style (or Highlight) Specific Dates
Datepicker can be configured to style certain dates through CSS classes using the beforeShowDay method. In the following example, dates 10 to 23 of the current month are highlighted using CSS (see the CSS tab). Fridays and Saturdays are disabled as well:
Internationalization and Localization
Datepicker provides support for localizing its content to allow for different languages, date formats and rules. For this, include the desired localization file(s) after including jQuery UI (note the order in which scripts are included inside the head tag).
Each localization file adds its settings to the set of available localizations and overwrites the default settings. So if you are loading multiple localization files you must specify the default values for datepicker plus any additional options:
Update Datepicker Using AJAX
Datepicker data (e.g. list of highlighted or disabled dates) can be fetched via AJAX. In the following example, a list of US holidays is fetched via AJAX, beforeShowDay method is used to highlight dates and refresh method is used to signal that data has changed plus calendar needs update:
Using Datepicker to Select Date Range
Datepicker can be used to choose date ranges. In the following example, two input boxes and an inline calendar is used to create a date range picker:
