A Date and Time Picker plugin for jQueryMobile
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"}'>
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 swatch today's date
Theme swatch choosen (centered) date
Theme swatch other dates
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