A Date and Time Picker plugin for jQueryMobile
You can also link inputs easily. (Show with optional 'center popup' option)
<div data-role="fieldcontain"> <label for="linked1">Date</label> <input name="linked1" type="text" data-role="datebox" id="linked1" data-options='{"mode": "datebox", "closeCallback": "$(\"#linked2\").datebox(\"open\");"}' /> </div> <div data-role="fieldcontain"> <label for="linked2">Time</label> <input name="linked2" type="text" data-role="datebox" id="linked2" data-options='{"mode": "timebox", "overrideTimeFormat":12}' /> </div>
A Form showing checkin and checkout dates. With the addition of splitting the date into parts for the backend.
HTML Source
<div id="checklinkform"> <div data-role="fieldcontain"> <label for="checkin">Check-in:</label> <input name="checkin" id="checkin" type="date" data-role="datebox" data-options='{"closeCallback":"linkedCheckin", "closeCallbackArgs":["checkin"], "mode": "calbox", "focusMode": true, "centerWindow": true, "afterToday": true}'> </div> <div data-role="fieldcontain"> <input name="checkin_monthday" type="hidden" size="2" id="checkin_monthday" /> <input name="checkin_year_month" type="hidden" size="7" id="checkin_year_month" /> </div> <div data-role="fieldcontain"> <label for="checkout">Check-out:</label> <input name="checkout" id="checkout" type="date" data-role="datebox" data-options='{"calHighToday":false, "closeCallback":"linkedCheckin", "closeCallbackArgs":["checkout"], "mode": "calbox", "focusMode": true, "centerWindow": true}'> </div> <div data-role="fieldcontain"> <input name="checkout_monthday" type="hidden" size="2" id="checkout_monthday" /> <input name="checkout_year_month" type="hidden" size="7" id="checkout_year_month" /> </div> </div>
linkedCheckin = function (date, name) { // The widget itself var self = this, // The day after whatever just got set // btw, Date().copymod() is an extension of datebox - basically: // copymod([y,m,d,h,i,s],[y,m,d,h,i,s]) : // * This first array is an OFFSET of the original // * The second is an OVERRIDE of the original (if non-zero) nextday = date.copymod([0,0,1]); // Today today = new Date(); // The difference of today and whatever got set (secs) diff = parseInt((date - today) / ( 1000 * 60 * 60 * 24 ),10); // The same difference, in days (+2) diffstrt = (diff * -1)-2; // Lets fill in the other fields. $('#'+name+'_year_month').val(self._formatter('%Y-%m', date)); $('#'+name+'_monthday').val(self._formatter('%d', date)); // Update the seen output $('#checkoutput').text($('#checklinkform input').serialize()); // If we edited the checkin date, more work to do if ( name === "checkin" ) { // Ok, so in steps: (nuke the comments) // Set the (internal) checkout date to be whatever was picking in checkin +1 day $('#checkout').datebox('setTheDate', nextday); // Show that to the user $('#checkout').trigger('datebox', {'method':'doset'}); // Make sure that minDays won't let them check out same day or earlier $('#checkout').datebox({"minDays": diffstrt}); // Open it up $('#checkout').datebox('open'); } }