jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

Simple Linked Inputs

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>

Advanced Linked Inputs

A Form showing checkin and checkout dates. With the addition of splitting the date into parts for the backend.

RESULT
 
HTML Source
HTML
<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>
jQuery Source
jQuery
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');
  }
}