Use CMB2 to block out dates in DatePicker

Create an options page with checkboxes to disable dates in DatePicker.

I am working with a sourdough bread maker that has a Delivery Date date picker in the checkout. He needed to be able to block out dates where his delivery schedule was full. Let’s bring in CMB2.

Simple checkboxes

I have used CMB2 to create options pages to populate a Ninja Forms dropdown and to generate a list of services. For delivery dates it’s going to be a lot simpler – I will use the multicheck field type.

When blocking out dates in DatePicker I need to provide dates in dd-mm-yyyy format. As multicheck uses an associative array I could have this format internally and a readable date format for the checkbox text. For example:
27-04-2020 => Monday 27 April 2020

The list of dates will have to be dynamic as time never stops! I chose to create a simple loop that gets the current time and keeps adding 1 day to it and then generates the two date formats.

Change DatePicker on the front end

My client uses the Woocommerce Easy Checkout Field Editor premium plugin to add some fields to the checkout page. One of those fields is a powerful DateTimePicker. It is like the jQuery DatePicker with additional features.

CMB2 stores dates checked in the options page as an array so it’s very easy to convert this into a JavaScript array with implode().

My client had two additional needs – earliest delivery date is two days into the future (because his sourdough has a 27 hour lead time!!) and he doesn’t delivey on Mondays or Tuesdays.

Setting the minDate attribute to two days time sorts the first requirement. This is done in the JavaScript.

Excluding Mondays and Tuesdays is done in the PHP before creating the JavaScript array. I loop through the next 7 days and when it’s a Monday or Tuesday I go into a sub loop and add the next 6 Mondays and Tuesdays to the array of dates from the CMB2 multicheck list. This is in the code below but commented out.

The frontend

Here is how it looks on the client site (before Mondays and Tuesdays were blocked out). You can see that Thursday, Saturday, Sunday and Monday were blocked out. You can see that they cannot be selected (see the orange underline).

The code

Notes

The JavaScript part of this code is only for the DateTimePicker in the Woocommerce Easy Checkout Field Editor plugin. For jQuery DatePicker the code is not very different (‘beforeShowDay‘ setting with a callback).

I experimented with WooCommerce and the BusinessBloomer.com post about adding a custom checkout field of type=”date” but I could not find what object to use to target to change the settings.

Similar with Ninja Forms, I was unable to change the settings of the Pikaday date picker that it uses.

I am sure that I will return to both at a later date and figure them out.