Date picker (calendar) field
The date picker allows customers to choose a date from a calendar. This is what it looks like:
Enable the date picker
The date picker field will add 2 tiny scripts to your site, so you’ll have to enable a setting in order to use the field. The setting guarantees that sites not using the date picker don’t load extra files.
To enable the date field, go to WooCommerce → Settings → Product fields and check the Enable Date Fields setting.
Date picker settings explained
The date picker comes with a few unique settings. If you’re using the Extended version of our plugin, you’ll see even more settings.
Below is a list of each setting, which version it ships with, and what it does:
| Setting | Available in | Description |
|---|---|---|
| Date Selection options | Pro & Extended | This allows you to define if dates in the past/future should be selectable. |
| Disable days | Extended only! | Define which weekdays (such as the weekend: Saturday & Sunday) can’t be selected. |
| Min. date | Extended only! | Define the minimum date that can be selected. Any date before that won’t be valid. You can also add dynamic values such as “7d” which means “7 days from today”, or “-1m” which means “1 month ago”. For example, if you run a print shop and your delivery time is 2 days, you can make sure your customers can’t select today or tomorrow for delivery. |
| Max. date | Extended only! | Define the maximum allowed date. Any selected date after that won’t be valid. Just like the min. date setting, you can add dynamic values. |
| Disabled dates | Extended only! | Define a comma-separated list of dates that can’t be selected. This setting is handy to define vacation days or holidays. If you ommit the year from your date, the date will be disabled every year. |
| Disable today after a specific time | Extended only! | This setting allows users to select today’s date only if the current time is before the specified time. This setting prevents delivery businesses from delivering on the same day when it’s already too late in the day. |
Changing the date field format
By default, the date field’s output will be shown in the following format: mm-dd-yyyy. You can change the format by going to WooCommerce → Settings → Product fields. Find the Date Format setting:
Styling the date picker
You can style various aspects of the date picker with CSS. We have a document with code snippets here.