jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

Basic Calendar

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"}'>

Basic Calendar w/ Week Numbers

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}'>

Calendar w/ Pickers instead of Header

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}'>

Changing the start of the week (overrideCalStartDay)

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}'>

Selecting by week (calWeekMode)

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}'>

Showing a "today" button (useTodayButton)

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}'>

Showing a picklist of special dates (calShowDateList)

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}'>

Hide day labels (calShowDays)

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}'>

Use Control Groups (calControlGroup)

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}'>

Hide other months (calOnlyMonth)

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}'>

Theme Options

  • themeDateToday

    Date button theme swatch for "today"

  • themeDayHigh

    Date button theme swatch for highlighted days (highDays)

  • themeDatePick

    Date button theme swatch for choosen date

  • themeDateHigh

    Date button theme swatch for highlighted dates (highDates)

  • themeDateHighAlt

    Date button theme swatch for highlighted dates (highDatesAlt)

  • themeDate

    Date button theme swatch for all other dates (inherited)

  • calHighToday

    Boolean, highlight "today"'s date

  • calHighPick

    Boolean, highlight choosen date