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.
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.
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.
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).
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.