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 settings explained
The date picker comes with a few unique settings. If you’re using the Extended version, you’ll see even more settings. Below is a list of each setting and what it does:
| Setting | Available in | Description |
| Selection options | Pro & Extended | This allows you to define if dates in the past/future should be selectable. |
| Disable days | Extended | Define which weekdays (such as the weekend: Saturday & Sunday) can’t be selected. |
| Min. date | Extended | 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”. 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 | 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 | Define a comma-separated list of dates that can’t be selected. This setting is handy to define vacation days or holidays. |
| Disable today after a specific time | Extended | 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.