Date picker

Ask a question

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
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-date-picker
AMD Module key: N/A
Experimental since: 4.0
General API status: 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.