jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

Slide Default

Using the slide mode is as simple as setting the 'mode' option to "slidebox".

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

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

Slide with Time

Using the slide mode is as simple as setting the 'mode' option to "slidebox". For time input as well, just add the "h" and "i" field types. You'll also want to set an appropriate output format.

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

<input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "slidebox", "overrideDateFormat":"%Y-%m-%dT%I:%M%p", "overrideTimeFormat":12, "overrideSlideFieldOrder":["y","m","d","h","i"]}'>

Theme Options

  • themeDateHigh

    Theme swatch today's date

  • themeDatePick

    Theme swatch choosen (centered) date

  • themeDate

    Theme swatch other dates

Slider Length

To control the "length" of the sliders, you can alter the 'slen' option. It has five properties:

slen: {'y': 5, 'm':6, 'd':15, 'h':12, 'i':30}

Note that these numbers are *half* of the slide length - this is the pad on either side of the centered element