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:

SettingAvailable inDescription
Selection optionsPro & ExtendedThis allows you to define if dates in the past/future should be selectable.
Disable daysExtendedDefine which weekdays (such as the weekend: Saturday & Sunday) can’t be selected.
Min. dateExtendedDefine 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. dateExtendedDefine 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 datesExtendedDefine 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 timeExtendedThis 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.

Was this article helpful?

Related Articles