jQueryMobile DateBox - Date and Time Picker plugin

Download   Demo

DateBox is a jQueryMobile plugin that aims to make user interaction with dates and times simple and intuitive. It is a colloborative work, with a full range of features allowing easy implementation, and painless extensibility.

Features:

Multiple Data-Entry Modes

Android style date picker

Calendar style date picker

Slide style date picker

Flip Wheel style date or time picker

12 and 24 hour time picker

Duration time picker

4 Different display modes

Standard, click-outside-to-close popup mode

Forced input modal popup mode

Unique page dialog mode

Inline mode

Fully localized

Configurable Month names

Configurable Day Names

All labels and buttons configuratble

Supports data-limiting of input

Configurable maximum and minimum years (android mode)

Configurable maximum and minimum number of days from “today” (both date modes)

Allows blacklisting of days of the week or specific dates (calendar mode)

Allows selecting specific day from any week selection (calendar mode)

Automatically parses hand-entered or pre-entered dates on open

Auto-bind’s to data-role=’datebox’, options are configurable via data-options.

1. Includes styles and scripts, with the English-US language varient:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

<!-- Optional Mousewheel support: https://github.com/brandonaaron/jquery-mousewheel -->
<script type="text/javascript" src="PATH/TO/YOUR/COPY/OF/jquery.mousewheel.min.js"></script>

<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>

2. HTML

<input name="mode1" id="mode1" type="text" data-role="datebox" data-options='"mode":"calbox", "useNewStyle":true' />

3. EXAMPLES

CalBox

<input name="mode1" id="mode1" type="text" data-role="datebox" data-options='"mode":"calbox", "useNewStyle":true' />

DateBox

<input name="mode2" id="mode2" type="text" data-role="datebox" data-options='"mode":"datebox", "useNewStyle":true' />

TimeBox

<input name="mode6" id="mode6" type="text" data-role="datebox" data-options='"mode":"timebox", "useNewStyle":true' />

FlipBox

<input name="mode3" id="mode3" type="text" data-role="datebox" data-options='"mode":"flipbox", "useNewStyle":true' />

TimeFlipBox

<input name="mode7" id="mode7" type="text" data-role="datebox" data-options='"mode":"timeflipbox", "useNewStyle":true' />

SlideBox

<input name="mode4" id="mode4" type="text" data-role="datebox" data-options='"mode":"slidebox", "useNewStyle":true' />

DurationBox

<input name="mode5" id="mode5" type="text" data-role="datebox" data-options='"mode":"durationbox", "useNewStyle":true' />

DurationFlipBox

<input name="mode8" id="mode8" type="text" data-role="datebox" data-options='"mode":"durationflipbox", "useNewStyle":true' />

CustomBox

<input name="mode6" id="mode6" type="text" data-role="datebox" data-options='"mode":"custombox", "useNewStyle":true' />

CustomFlip

<input name=”mode7” id=”mode7” type=”text” data-role=”datebox” data-options=’“mode”:”customflip”, “useNewStyle”:true‘ />

jQueryMobile DateBox - Date and Time Picker plugin