jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

Forced Popup Mode

You can force the dialog mode off with 'dialogEnable' set to 'false' (this is the default!!)

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "calbox"}'>

Built-In Popup Mode

You can use jQM's builtin popup plugin as well. Set 'enablePopup' to true.

Other related options are 'popupForceX' and 'popupForceY' which, when used together can force the absolute position of the opened popup. 'popupPosition' can be left false, and the popup will center over the associated input element, or set to 'window', and it will be centered in the window (with scroll position intact).

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "enablePopup": true}'>

Forced Dialog Mode

You can force the dialog mode on with 'dialogForce' set to 'true'

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "dialogForce": true}'>

Centered Mode

You can force DateBox to display centered horizontaly on the page with 'centerHoriz' set to 'true'.

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"calbox", "centerHoriz": true}'>

You can force DateBox to display centered horizontaly on the page with 'centerVert' set to 'true'.

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"calbox", "centerVert": true}'>

Inline Mode

You can force DateBox to display inline with 'useInline' set to 'true'. Also shown with 'useImmediate', which will update the input every time a change is made to the control, and 'useSetButton' set to false to hide the set button.

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"datebox", "useSetButton":false, "useInline": true, "useImmediate":true}'>

Inline Blind Mode

DateBox also has a rolldown "blind" mode - this example combines the focus mode, blind rollout, and auto-updates.

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"datebox", "useImmediate":true, "useButton": false, "useFocus": true, "useInlineBlind": true}'>

Inline w/o Input

You can force DateBox to display inline (without the input hiding) with 'useInline' and 'hideInput' set to 'true'.

Choosen Date:

<label for="mydate">Some Date</label>

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"datebox", "useInline": true, "hideInput": true, "useSetButton":false, "useImmediate":tr}'>