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

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 customer could set the pickup date on each individual product before 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

Create a new product property with these settings:

Setting Value
Display name Pickup Date
Visible to customer checked
Input control HTML Generic
Take values from predefined values checked
Callback function returnValue
HTML Markup enter the code shown below 
<!-- for products using the newer uStore NG and single-page mode, use the div below -->
<div>
  <input id="pickupDateTime" type="text" value="#DIAL_VALUE#" />
</div>

<!-- if using the older uStore UI in multi-page mode, comment out the div above and uncomment the table below -->
<!--
<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>
-->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src=https://cdn.jsdelivr.net/npm/flatpickr></script>
<script type="text/javascript">

var holidays = ['2024-1-1', '2024-12-25']; //enter the holidays when pickup is not available

setTimeout(() => {
  flatpickr(document.getElementById("pickupDateTime"), {
    // For more configuration options, refer to https://flatpickr.js.org/examples/
    enableTime: true,
    minTime: '09:00',
    maxTime: '17:00',
    minuteIncrement: '15',
    dateFormat: "Y-m-d H:i",
    minDate: new Date().fp_incr(1), //add 1 day to prevent pickup today
    disable: [
      function(date) {
        var y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate();
        var dateOnly = y + "-" + m + "-" + d;
        for (i = 0; i < holidays.length; i++) {
          if(Date.parse(holidays[i]) == Date.parse(dateOnly))  { // this line hides the holidays
            return true;
          } else if (date.getDay() == 0) {  // 0 = sunday - this line hides all sundays
             return true;
          } 
        }
        return false;
      }
    ], 
    onChange: function(selectedDates, dateStr, instance) {
      returnValue(dateStr);
    }
  });
}, 1000)
</script>

Note that this example uses flatpickr which includes many more configuration and theme options that you can use.

This example has been tested with uStore versions 15 onwards including both static and dynamic products, and when using both single- and multi-page modes.

When using the property in the older "multi-page" mode, you will need to make two small changes in the code:

  1. comment out the div at the top of the markup, and
  2. uncomment the table html so it will be used to better display the property.
⚠️ **GitHub.com Fallback** ⚠️