A Date and Time Picker plugin for jQueryMobile
Using a calendar is as simple as setting the 'mode' option to "calbox".
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>
To show week numbers, set 'calShowWeek' to true. (shown with start of week overriden to monday)
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calShowWeek": true}'>
To show week numbers, set 'calUsePickers' and 'calNoHeader' to true.
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calUsePickers": true, "calNoHeader": true}'>
To change the start of the week, set option 'overrideCalStartDay' (or calStartDay in an i18n config file) to an integer 0-6, where 0=Sunday, 1=Monday...
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "overrideCalStartDay": 1}'>
Using a calendar to select a specific day can be accomplished by setting option 'calWeekMode' to 'true' and 'calWeekModeFirstDay' to the day you wish to pick. For instance, to select by week using monday:
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calWeekMode": true, "calWeekModeFirstDay": 1}'>
You can also highlight the full week in this mode:
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calWeekHigh":true, "calWeekMode": true, "calWeekModeFirstDay": 1}'>
To show a today button, set 'calTodayButton' to true
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "useTodayButton": true}'>
To show a list of special dates, below the calendar, you need to both turn 'calShowDateList' on, and provide the list of dates.
The list of dates is an array of arrays - each element of the array needs to be a 2 element array, with the date and the text to display.
[ ["2013-01-01", "New Years Day"], ["2013-02-14", "Valentines Day"], ["2013-04-25", "JT's B-Day"] ]
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calDateList": [["2013-01-01","New Years Day"],["2013-02-14","Valentines Day"],["2013-04-25","JTs B-Day"], "calShowDateList":true}'>
To hide day labels, set 'calShowDays' to false
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calShowDays": false}'>
To display date buttons as a control group, set "calControlGroup" to true
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calControlGroup": true}'>
To hide next and previous month dates, set "calOnlyMonth" to true
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calOnlyMonth": true}'>
Date button theme swatch for "today"
Date button theme swatch for highlighted days (highDays)
Date button theme swatch for choosen date
Date button theme swatch for highlighted dates (highDates)
Date button theme swatch for highlighted dates (highDatesAlt)
Date button theme swatch for all other dates (inherited)
Boolean, highlight "today"'s date
Boolean, highlight choosen date