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 
<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, 16 and 17 including both static and dynamic products, using both single- and multi-page modes. Note that v17 uStore will remove the <link> tag that calls the CSS into the page. This will be fixed in v17.1 uStore.

When using the property in "single-page" mode, you will not need the full table html at the top of the markup. You can just leave the <input id="pickupDateTime" type="text" value="#DIAL_VALUE#" /> and remove the rest of the table code before the link and javascript sections.

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