jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

Linked w/ Select

The date input controls what is in the select box.

Source Code
HTML
<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);
    }
  }
});