A Date and Time Picker plugin for jQueryMobile
Range limiting can be accomplished a number of ways, the options available are:
When set, only dates that are after or on "today" are selectable (all date modes)
When set, only dates that are before or on "today" are selectable (all date modes)
When set, "today" is not selectable (all date modes)
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)
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)
When set, only hours that are after specified hour may be selected. (all time modes)
When set, only hours that are before specified hour may be selected. (all time modes)
An array of days to disable, every week. 0 = Sunday, 1 = Monday, ... 6 = Saturday (e.g. [2]) (all date modes)
An array of ISO 8601 Dates to disable. (e.g. ["2011-01-01", "2011-12-25"]) (all date modes)
An array of ISO 8601 Dates to exclusivly enable (disable everything else). (e.g. ["2011-01-01", "2011-12-25"]) (calbox)
An array of days to highlight, every week. 0 = Sunday, 1 = Monday, ... 6 = Saturday (e.g. [2]) (calbox)
An array of ISO 8601 Dates to highlight. (e.g. ["2011-01-01", "2011-12-25"]) (calbox)
An second, alternate array of ISO 8601 Dates to highlight. (e.g. ["2011-01-01", "2011-12-25"]) (calbox)
An array of valid hours of the day for the picker (e.g [9,10,11,13,14,15,16]) (all time modes)
ISO Min Date (in element attribute) (all date modes)
ISO Max Date (in element attribute) (all date modes)
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 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 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>
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
<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; });
Demonstrates using date picker and a text box to enter a date range (customizable)
<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(); });
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>
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>
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>
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>
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>
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>
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>