jQuery-Mobile-DateBox

DateBox is a small, android-esk date picker, using as many of the native jQueryMobile controls as possible.

This is based in part on the work of Todd M. Horst, and his Android Like Date Picker 2

DateBox Features

• Two display modes, Android style datepicker and a Calendar style.

• Additionally, now sports a time picker mode.

• Auto-parses text entered into form element on open. (any valid date string in your browsers locale, uses javascript:Date())

• Attempts to position itself centered over the input, however, for small screens, it will open a dialog window instead.

• Click outside the widget to close.

• Auto-bind's to data-type='datebox', options are configurable via data-options.

• Configurable date format output.

• Configurable Month and Day names for localization.

• Android Mode: Input items on DateBox are directly editable, allowing for quick date change.

• Android Mode: Auto-corrects out of bounds (calendar invalid) dates into the closest real date (e.g. Feb 31st becomes March 2nd or 3rd depending on the year)

Suggested Use

// BEFORE loading jQM
$( document ).bind( "mobileinit", function(){
	$.mobile.page.prototype.options.degradeInputs.date = 'text';
});

No Option Overrides:

<input type="date" data-role="datebox" name="somedate" />

With Option Overrides:

<input type="date" data-role="datebox" name="somedate" data-options='{"buttonTheme": "b", "dateFormat": "mm/dd/YYYY"}' />

Available Options

These can be passed to datebox via an object set at the data-options attribute, or in the standard method

Themeing:

• theme : Theme for original input element
• pickPageTheme : Theme for popup window or dialog
• pickPageInputTheme : Android Mode - Month/Date/Year Input Elements
• pickPageButtonTheme : Both Modes - Widget buttons
• pickPageHighButtonTheme : Calendar Mode - "Today" and "Selected" Day highlighting
• zindex : Z-Index for popup window (default: 500)
• noAnimation : Disable popup window animations.

Internationalization:

• setDateButtonLabel : Android Mode - The label displayed in the set date button, default is "Set date"
• daysOfWeek : Android Mode - An array of the days of the week, Sunday -> Saturday
• daysOfWeekShort : Calendar Mode - An Array of abreviations for days of the week, Sunday -> Saturday
• monthsOfYear : Both Modes - An Array of months of the year, January -> December
• fieldsOrder : Android Mode - Define the order of the fields, default is m-d-y
• headerFormat : Both Modes - Return header format - (YYYY = Year, MM = Zero Padded Month, mm = Month, mmm = Month of year, DD = Zero Padded Day, dd = Day, ddd = day of week)
• dateFormat : Both Modes - Return date format - (YYYY = Year, MM = Zero Padded Month, mm = Month, DD = Zero Padded Day, dd = Day)
• timeFormat : Either '12' or '24' - The clock mode, 12hr or 24hr.
• meridiemLetters : Meridiem notation - Default is ['AM', 'PM']

Customization:

• mode : Mode of operation - either 'datebox' (android), 'calbox' (calendar), or 'timebox' (android time)
• defaultDate : Default date when nothing entered into input box
• maxYear : Maximum year allowed in controls (non-constrained in text box)
• minYear : Minimum year allowed in controls (non-constrained in text box)
• calShowDays : Calendar mode - Boolean show day names in grid
• calShowOnlyMonth : Calendar mode - show only this month, do not fill in empty boxes (default: false)
• useDialogForceTrue : Boolean Always use Dialog Window, regardless of screen size
• useDialogForceFalse : Boolean Never use Dialog Window, regardless of screen size
• useModal : Use modal styling (background fades out) on popup (default: false)
• noButtonFocusMode : Suppress button, open on element focus instead

To disable the element, use the standard disabled='disabled' in your markup.