How to Add & Configure Date Picker Field?

Last updated on August 18, 2022

This article explains the steps to add a Date Picker in the WooCommerce Checkout page by correctly configuring WooCommerce Checkout Field Editor plugin. Using this plugin you can customize WooCommerce checkout fields.

Add New Date Picker Field

To add a new Date Picker field, first go to one of the sections (Billing, Shipping, Additional) where you want to add the field, and then click the ‘Add Field’ button.

It will open a popup form where you need to select Date Picker from the Field Type select box. Fill the name for the field and other properties in the form and click on the ‘Add New Field’ button. Finally, click on the ‘Save Changes’ button so that the new changes take effect.

Properties specific to the field type Datepicker

Date Format	Define the date format accepted for this field. The default format is dd/mm/yy. You can edit this format and rewrite it according to your requirements. These are the other general time formats you can use: International – mm/dd/yy Medium – d MM, y ISO 8601 – yyyy-mm-dd Short – d M, y Full – DD, d MM, yy With Text – ‘Day’ d ‘of’ MM ‘in the year’ yy
Default Date	Set default date to be displayed. Specify the date in the format specified in the Date Format property. You may also specify the number of days to be offset from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘+1m +7d’), or leave empty if you don’t want to set a minimum limit.
Min. Date	The date picker calendar will only show dates starting from the date set in this field. Specify the date in the format yyyy-mm-dd. You may also specify the number of days to be offset from today (e.g. -7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘-1m -7d’), or leave empty for today.
Max. Date	The calendar will only show dates up to the date set in this field. Specify the date in the format yyyy-mm-dd. You may also specify the number of days from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘+1m +7d’), or leave empty if you don’t want to set a maximum limit.
Year Range	This defines the range of years displayed in the year drop-down of the date picker calendar. The format is “from year: to year”. You can set the range in different ways as explained below: Relative to current year (‘-nn:+nn’): e.g. -5:+3 . If the current year is 2016, the dropdown will show years from 2011 till 2019. Relative to the currently selected year(‘c-nn:c+nn’): e.g. c-5:c+3. If the year of the selected date is 2017, the dropdown will show years from 2012 till 2020. Absolute values(‘nnnn:nnnn’): e.g. 1900:2018. The dropdown will show years from 1900 till 2018. Combinations of above formats(‘nnnn:+nn’,’-nn:c+nn’,etc.. ): e.g. 2012:+3. The dropdown will show years from 2012 till 2019 if the current year is 2016. eg -5:c+3. The dropdown will show years from 2011 till 2020 if the current year is 2016 and the selected date is in the year 2017. Note that this option only affects what appears in the year drop-down on the calendar popup. To restrict which dates may be selected from the calendar, use Min. Date and/or Max. Date properties.
Number Of Months	The number of months to show at once on the date picker calendar.
Disabled Days	Select the days of the week that need to be disabled on the calendar. For example, you may want to disable Saturdays and Sundays on the calendar.
Disabled Dates	Enter dates that need to be disabled on the calendar in yyyy-mm-dd format separated by commas for multiple dates. This is useful if you want to disable specific days such as holidays. Ensure the dates are provided in the correct format. If you want to disable 17th January 2017 and 23rd March 2017 in the date picker you can fill this field with the value 2017-01-17,2017-03-23.

How To Disable Specific Days In Date-Picker

You can disable specific days from the calendar using the Disabled Days option in the field settings form. Choose the days that need to be disabled on the calendar from the Disabled Days multi-select drop-down. This is useful if you want to disable specific days such as Saturdays and Sundays. For example, if you want to disable Saturdays and Sundays in the date picker you can choose these days from the drop-down options.

Refer to the above video.

How To Disable Specific Dates In Date-Picker

You can disable specific dates from the calendar using the “Disabled Dates” option in the field settings form. Enter dates that need to be disabled on the calendar in yyyy-mm-dd format separated by commas for multiple dates. This is useful if you want to disable specific days such as holidays. Ensure the dates are provided in the correct format. For example, if you want to disable 3rd March 2017(Mother’s Day) and 25th December 2017(Christmas Day) in the date picker you can fill this field with the value 2017-03-03,2017-12-25.