Documentation
Date picker
Code snippetsSummary
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 |
| 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.
<input class="aui-date-picker" id="demo-range-always" type="date" max="2012-01-05" min="2011-12-25" />AJS.$(document).ready(function() {
AJS.$('#demo-range-always').datePicker({'overrideBrowserDefault': true});
});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. |
|