A Date and Time Picker plugin for jQueryMobile
These are all linked - it gives a general idea of how to accomplish it.
<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(); });