jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

Range Limiting

Range limiting can be accomplished a number of ways, the options available are:

  • afterToday

    When set, only dates that are after or on "today" are selectable (all date modes)

  • beforeToday

    When set, only dates that are before or on "today" are selectable (all date modes)

  • notToday

    When set, "today" is not selectable (all date modes)

  • minDays

    When set, only dates that are after *number* of days before today may be selected. Note that minDays can be a negative number. (all date modes)

  • maxDays

    When set, only dates that are before *number* of days after today may be selected. Note that maxDays can be a negative number. (all date modes)

  • minHour

    When set, only hours that are after specified hour may be selected. (all time modes)

  • maxHour

    When set, only hours that are before specified hour may be selected. (all time modes)

  • blackDays

    An array of days to disable, every week. 0 = Sunday, 1 = Monday, ... 6 = Saturday (e.g. [2]) (all date modes)

  • blackDates

    An array of ISO 8601 Dates to disable. (e.g. ["2011-01-01", "2011-12-25"]) (all date modes)

  • enableDates

    An array of ISO 8601 Dates to exclusivly enable (disable everything else). (e.g. ["2011-01-01", "2011-12-25"]) (calbox)

  • highDays

    An array of days to highlight, every week. 0 = Sunday, 1 = Monday, ... 6 = Saturday (e.g. [2]) (calbox)

  • highDates

    An array of ISO 8601 Dates to highlight. (e.g. ["2011-01-01", "2011-12-25"]) (calbox)

  • highDatesAlt

    An second, alternate array of ISO 8601 Dates to highlight. (e.g. ["2011-01-01", "2011-12-25"]) (calbox)

  • validHours

    An array of valid hours of the day for the picker (e.g [9,10,11,13,14,15,16]) (all time modes)

  • min (attr)

    ISO Min Date (in element attribute) (all date modes)

  • max (attr)

    ISO Max Date (in element attribute) (all date modes)

Limit to today + 60 days

Limit the allowed dates to at minimum today, and at maximum 60 days in the future. Note that this is also valid in android mode.

The calendar mode does limit users to viewing months with valid dates.

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode": "calbox", "afterToday": true, "maxDays": 60}'>
</div>

Limit between Two Dates (2001-01-02 & 2001-01-25)

Limit the valid dates between two named dates, using the min/max HTML5 attributes.

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        min="2001-01-02" max="2001-01-25" data-options='{"mode": "calbox"}'>
</div>

Limit between 2009 and 2019

Limit the allowed dates to at minimum today, and at maximum 60 days in the future. Note that this is also valid in android mode.

The calendar mode does limit users to viewing months with valid dates.

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode": "datebox", "minYear": 2009, "maxYear": 2019}'>
</div>

Limit to today + 10 days, then based on start.

The first date is limited from "today" to 10 days in the future.

The second date is limited from the first date, to 10 days after the first date

Source Code
HTML
<div data-role="fieldcontain">
    <label for="calrlimit1">Beginning Date</label>
    <input name="calrlimit1" type="date" data-role="datebox" id="calrlimit1" 
        data-options='{"mode": "calbox", "afterToday": true, "maxDays": 10}' />
</div>
<div data-role="fieldcontain">
    <label for="calrlimit2">Ending Date</label>
    <input name="calrlimit2" type="date" data-role="datebox" id="calrlimit2"
        data-options='{"minDays": -10, "maxDays": 10, "mode": "calbox"}' />
</div>
JQuery
$('#calrlimit1').live('change', function() {
    $('#calrlimit2').val($('#calrlimit1').val());
    var temp = new Date(),
        diff = parseInt(($('#calrlimit1').data('mobileDatebox').theDate - temp) / ( 1000 * 60 * 60 * 24 ));
        diffstrt = (diff * -1)-1; // If you want a minimum of 1 day between, make this -2 instead of -1
        diffend = diff + 11; // Why 11 instead of 10?  No idea...

    $('#calrlimit2').data('mobileDatebox').options.minDays = diffstrt;
    $('#calrlimit2').data('mobileDatebox').options.maxDays = diffend;
});

Date Range Input

Demonstrates using date picker and a text box to enter a date range (customizable)

Source Code
HTML
<div data-role="fieldcontain">
    <label for="drorangestart">Start Date:</label>
    <input name="drorangestart" type="date" data-role="datebox" id="drorangestart"/>
</div>
<div data-role="fieldcontain">    
    <label for='drorangedays'>Number of Days:</label>
    <select data-native-menu="false" name='drorangedays' id='drorangedays' >
        <option value='7' selected="selected">1 Week</option>
        <option value='6'>6 Days</option>
        <option value='5'>5 Days</option>
        <option value='4'>4 Days</option>
        <option value='3'>3 Days</option>
        <option value='2'>2 Days</option>
        <option value='1'>1 Day</option>
    </select>
</div>
<div data-role="fieldcontain">
    <label for="drorangeend">End Date:</label>
    <input id="drorangeend" type="text" />
</div>
jQuery
function updateEndDate() { 
  var newdate = new Date($('#drorangestart').data('mobileDatebox').theDate);
  if ( newdate.getDate() ) { 
    newdate.setDate(newdate.getDate() + parseInt($('#drorangedays').val()));
        
    var padMonth = (( newdate.getMonth() < 9 ) ? "0" : "") + ( newdate.getMonth() + 1 ),
        padDay = (( newdate.getDate() < 10 ) ? "0" : "") + newdate.getDate();
        
    $('#drorangeend').val(newdate.getFullYear() + "-" + padMonth + "-" + padDay);
  }
}

$('#drorangestart').live('change', function() {
  updateEndDate();
});

$('#drorangedays').live('change', function() {
  updateEndDate();
});

Blacklisted and Highlighted Days

Example shows all Tuesdays disabled, Saturdays Highlighted

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
       data-options='{"mode": "calbox", "blackDays": [2], "highDays": [6] }'>
</div>

Blacklisted Dates

Example shows all Christmas disabled.

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode": "calbox", "blackDates": ["2011-12-24", "2011-12-25"] }'>
</div>

Blacklisted Recurring Dates

Example shows all Christmas, New Years, 15th of month disabled.

Given as an array of 3 element arrays - [year,month,day] - use "-1" for "all"

NOTE: month is zero-offset (0=Jan, 11=Dec)

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode": "calbox", "blackDatesRec": [[-1,11,24],[-1,11,25],[-1,0,1],[-1,-1,15]]}'>
</div>

Exclusive Dates

Example shows only Christmas enabled.

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode": "calbox", "enableDates": ["2011-12-24", "2011-12-25"] }'>
</div>

Highlighted Dates

Example shows all Christmas highlighted.

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode": "calbox", "highDates": ["2011-12-24", "2011-12-25"] }'>
</div>

Highlighted Recurring Dates

Example shows all Christmas, New Years, 15th of month highlighted.

Given as an array of 3 element arrays - [year,month,day] - use "-1" for "all"

NOTE: month is zero-offset (0=Jan, 11=Dec)

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode": "calbox", "highDatesRec": [[-1,11,24],[-1,11,25],[-1,0,1],[-1,-1,15]]}'>
</div>

Valid Hours

Example shows valid work-day hours

<div data-role="fieldcontain">
    <label for="mydate">Some Date</label>
    <input name="mydate" id="mydate" type="date" data-role="datebox"
        data-options='{"mode":"timebox", "validHours":[9,10,11,13,14,15,16]}'>
</div>