jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

Linked Inputs

These are all linked - it gives a general idea of how to accomplish it.

Source Code
HTML
<div data-role="fieldcontain">
    <label for="link1">Start Time</label>
    <input name="link1" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link1" />
</div>
<div data-role="fieldcontain">
    <label for="link2">Duration</label>
    <input name="link2" type="text" data-role="datebox" data-options='{"mode": "durationbox", "defaultPickerValue":0}' id="link2" />
</div>
<div data-role="fieldcontain">
    <label for="link3">End Time</label>
    <input name="link3" type="text" data-role="datebox" data-options='{"mode": "timebox"}' id="link3" />
</div>
jQuery
function dooffset() { // This does the actual work.  if you wanted based on "now", startdate should be = new Date();
  var startdate = $('#link1').datebox('getTheDate'),
    offsetsec = $('#link2').datebox('getLastDur'),
    enddate = new Date(startdate.getFullYear(), startdate.getMonth(), startdate.getDate(), startdate.getHours(), startdate.getMinutes(), startdate.getSeconds(), 0);

  enddate.setSeconds(enddate.getSeconds() + offsetsec);
  $('#link3').datebox('setTheDate', enddate);
  $('#link3').trigger('datebox', {'method':'doset'});
}
$('#link1').live('change', function() {
  $('#link2').trigger('datebox', {'method':'doset'});
});
$('#link2').live('change', function() {
  dooffset();
});