A Date and Time Picker plugin for jQueryMobile
The date input controls what is in the select box.
<div data-role="fieldcontain"> <label for="datetime">Date</label> <input data-options='{"mode":"calbox", "overrideDateFormat":"%Y-%m-%d", "defaultValue":[2001,0,1], "calHighPicked":false, "calHighToday":false, "calHighPicked": false}' data-role="datebox" id="datetime" name="datetime" type="date" /> <div data-role="fieldcontain"> </div> <label for="timeselect">Time</label> <select name="timeselect" id="timeselect" data-native-menu="false"> <option>Please choose a valid date first.</option> </select> </div>jQuery
var timeOptions = { '2001-01-03': ['10:00AM', '10:30AM', '11:00AM', '2:30PM', '3:00PM'], '2001-01-06': ['1:00PM', '1:30PM', '2:00PM', '4:00PM', '4:30PM'], }; // Pull just the dates from the previous object var timeOptionDates = []; for ( var key in timeOptions ) { timeOptionDates.push(key); } // Update the datebox object with the highlighted dates function updateHighDates() { $('#datetime').data('datebox').options.highDates = timeOptionDates; $('#datetime').trigger('datebox', {'method':'dorefresh'}); } // Bind pageshow to update the highlighted dates - I split it, because if you use // ajax to somehow update the list of valid dates and times, it would need to be // refreshed. $(document).bind('pageshow', function() { updateHighDates(); }); // Bind the datebox event, and... $('#datetime').live('datebox', function(event, payload) { // On the 'set' method... if ( payload.method === 'set' ) { // If it is *not* a valid date, reopen the datebox... if ( typeof timeOptions[payload.value] === "undefined" ) { $('#timeselect').html('<option>Please choose a valid date first.</option>'); $('#timeselect').selectmenu('refresh'); console.log('Reopening datebox in 300ms...'); setTimeout("$('#datetime').trigger('datebox', {'method': 'open'});", 300); // OR, populate the select menu with the times, and open that instead. } else { var selectOptions = ['<option>Now, choose a time...</option>']; for ( var val in timeOptions[payload.value] ) { selectOptions.push('<option value="'+timeOptions[payload.value][val]+'">'+timeOptions[payload.value][val]+'</option>'); } $('#timeselect').html(selectOptions.join()); $('#timeselect').selectmenu('refresh'); console.log('Opening time select in 300ms...'); setTimeout("$('#timeselect').selectmenu('open');", 300); } } });