JQuery date selector for order pickup date property - xmpie-users/uStore-js GitHub Wiki

Click here for an updated sample

Date selector for order pickup date property - updated

For this one, I had a customer who wanted his shoppers to be able to select a pickup date and time when they ordered a product. This was done as a product property so the pickup date could be set on each product on the finalization step as it was added to the cart.

The pickup date selection requirement from the customer was:

  • could not be the current date, had to at least be tomorrow.
  • could not be a sunday
  • could not be a public holiday (he would manually set the public holidays each year - see commented line in the markup)
  • time selection needed to be within 15 minute increments between the store open hours 9am-5pm

Display name - Pickup Date Visible to customer - checked Input control - HTML Generic Take values from predefined values - checked Callback function - returnValue HTML Markup is below:

<link rel="stylesheet" type="text/css" href="/ustore/images/<skin folder>/timepicker/jquery-ui.structure.min.css"/ >
<link rel="stylesheet" type="text/css" href="/ustore/images/<skin folder>/timepicker/jquery-ui.min.css"/ >
<link rel="stylesheet" type="text/css" href="/ustore/images/<skin folder>/timepicker/jquery-ui.theme.min.css"/ >
<link rel="stylesheet" type="text/css" href="/ustore/images/<skin folder>/timepicker/jquery-ui-timepicker-addon.css"/ >
<script src="/ustore/images/<skin folder>/timepicker/jquery-ui.min.js"></script>
<script src="/ustore/images/<skin folder>/timepicker/jquery-ui-timepicker-addon.js"></script>

<SCRIPT type="text/javascript"> 

holidays = ["30.10.2014","11.11.2014"]; //set the public holidays here

$( document ).ready(function() {
  $('#pickupDateTime').datetimepicker({
    //following settings configure the time picker
    minTime: '9:00 am',
    maxTime: '5:00 pm',
    stepHour: 1,
    stepMinute: 15,
    //following set default date and time
    dateFormat: "dd/mm/yy",
    hour: 9,
    minute: 0,
    minDate: 1, // can't select today - has to be at least tomorrow.
    //following setting hides sundays and public holidays
    beforeShowDay: noSundaysOrPublicHolidays,
    onSelect: function(date) {
      returnValue(date);
    }
  });
});

function noSundaysOrPublicHolidays(date) {
  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  for (i = 0; i < holidays.length; i++) {
    if($.inArray(d + '.' + (m+1) + '.' + y,holidays) != -1) { // hide if a holiday
      return [false];
    } else if (date.getDay() == 0) {  // 0 = hide sundays
      return [false];
    }
  }
  return [true];
}
</SCRIPT>

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
  <tr valign="baseline">
    <td><div class="FormLabel" style="width: 190px;">#DIAL_DISPLAY_NAME#</div></td>
    <td><input id="pickupDateTime" type="text" value="#DIAL_VALUE#" /></td>
  </tr>
</tbody>
</table>

You will notice at the top of the HTML markup, there are a number of JQuery UI scripts and CSS files called. You should visit the JQuery UI website and download your own scripts and store them in your store's skin folder. This gives you the opportunity to select a theme which will suit your store design. You can preview the Theme gallery here, or customize one to roll-you-own theme.

When downloading JQuery UI, I recommend to turn off as much as possible. For this example, you only need the Datepicker widget (which will automatically add any core utilities).

Also, this example uses timepicker by Trent Richardson

⚠️ **GitHub.com Fallback** ⚠️