Date pickers

Summary

A simple date picker polyfill for browsers that don't support date fields. Based on the jQuery UI Date Picker.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-date-picker
AMD Module key: N/A
Experimental API: 4
General API: 5.1

Examples

Code

HTML & JavaScript

The AUI Date Picker is set up with an HTML5 date input, plus JavaScript to set the desired options. In most implementations Date Picker is set to override the native implementation at all times. This gives a consistent experience in all browsers.

Options

Options are set in the JavaScript options object:

Option Type Default Effect
overrideBrowserDefault Boolean false Provides the polyfill regardless of whether or not the browser supports date input fields. If the browser supports date input fields, the field type is changed totext to suppress the browser's native date picker implementation. 

Use this option to maintain a consistent look across browsers, especially when native implementations are aesthetically unpleasant (as with Opera) or incomplete (as with Safari's spinner-only implementation).
firstDay Number -1 Sets the starting day of the calendar week. Zero to six represents Sunday to Saturday, and -1 represents the localisation's default setting.
languageCode String The html element's lang attribute if available, otherwise en-AU.

Localises various aspects of the date picker, including day names, the first day of the week, RTL text, month names, whether the year precedes the month, and whether the year requires a suffix. 

The following locales are supported: '' (used when an unavailable language code is specified), 'af', 'ar-DZ', 'ar', 'az', 'bg', 'bs', 'ca', 'cs', 'da', 'de', 'el', 'en-AU', 'en-GB', 'en-NZ', 'eo', 'es', 'et', 'eu', 'fa', 'fi', 'fo', 'fr-CH', 'fr', 'gl', 'he', 'hr', 'hu', 'hy', 'id', 'is', 'it', 'ja', 'ko', 'kz', 'lt', 'lv', 'ml', 'ms', 'nl', 'no', 'pl', 'pt-BR', 'pt', 'rm', 'ro', 'ru', 'sk', 'sl', 'sq', 'sr-SR', 'sr', 'sv', 'ta', 'th', 'tj', 'tr', 'uk', 'vi', 'zh-CN', 'zh-HK', and 'zh-TW'.

dateFormat String yy-mm-dd (which is ISO 8601) Sets the date format. Some date format examples can be found in the jQuery UI documentation.
hint String undefined Displays hint message below the calendar

Using calendar widget alone

There is an option to use the calendar widget without dialog and related input field.

Apart from the options from the listing above you can use any options acceptable by jQueryUI datepicker here.

Exception! The overrideBrowserDefault is not supported here.