


To add a date or time picker to your contact form module, all you need to do is:
(Select a hard date or rolling dates that update automatically.)
Add a new field to your contact form and set the field type to input. When the field is set to input, a toggle called Enable Date/Time Picker will be visibile. You can then set the Picker Type to Date.
Set Minimum Date Type to Rolling and set Minimum Date Rolling to 0. The number zero (0) always represents the current date so setting it zero (0) will always make the minimum date the current date.
Once you’ve toggled Enable Minimum Date/Time to On, set Minimum Date Type to Hard. You can then enter a single date in the Minimum Date field. The date must be entered in YYYY-MM-DD format.
The example field above has a hard minimum date of August 15th, 2021 (2021-08-15).
Once you’ve toggled Enable Minimum Date/Time to On, set Minimum Date Type to Rolling. You can then use the range slider to set the number of days before the current date (negative integers) or after the current date (positive integers) that should be used for the minimum date.
The example field above has a rolling minimum date of seven days BEFORE the current date (set to -7) .
Once you’ve toggled Enable Maximum Date/Time to On, set Maximum Date Type to Hard. You can then enter a single date in the Maximum Date field. The date must be entered in YYYY-MM-DD format.
The example field above has a hard Maximum date of January 1st, 2022 (2022-01-01).
Once you’ve toggled Enable Maximum Date/Time to On, set Maximum Date Type to Rolling. You can then use the range slider to set the number of days before the current date (negative integers) or after the current date (positive integers) that should be used for the maximum date.
The example field above has a rolling maximum date of seven days AFTER the current date (set to 7).
Under the Disable Days option, select the days of the week you’d like to disable in the calendar.
In the above example, Saturdays and Sundays have been disabled in the calendar.
Under Disable Specific Dates, enter a comma-separated list of dates to exclude from the calendar. Dates must be entered in the following format: YYYY-MM-DD.
In the example above, the 7th of every month in 2022 has been disabled.
In the Select Type dropdown, select Range of Dates from the list of options.
In the Select Type dropdown, select Multiple from the list of options.
This option also enables the Max Number of Dates field where you can choose how many dates the user is able to select.
The above example lets you select up to 3 dates.
In the Localization select box, change the option to the desired localization. This will affect the language the calendar is displayed in as well as the organization of the calendar itself.
The above example is set to Polish. Ładny!
In the Date Format field, use date tokens to change how the date displays in the field when a user selects a date. Compare the date in this field to the date shown other examples on this page.
In the above example, the format is set to l F J, Y
Each instance of a date/time picker can be customized to match your theme or design. User the Design tab, in the Layout toggle you’ll find color options to style the picker.
Add a new field to your contact form and set the field type to input. When the field is set to input, a toggle called Enable Date/Time Picker will be visible. You can then set the Picker Type to Time.
Once you’ve toggled Enable Minimum Date/Time to On, you can set both the Minimum Hour and Minimum Minutes. The Minimum Hour slider shows 24 hours so 1 PM would be 13, 2 Pm would be 14, etc.
The example field above has a minimum time of 8:15 AM. The hour field is set to 8 and the minute field is set to 15.
Once you’ve toggled Enable Maximum Date/Time to On, you can set both the Maximum Hour and Maximum Minutes. The Maximum Hour slider shows 24 hours so 1 PM would be 13, 2 Pm would be 14, etc.
The example field above has a maximum time of 5:30 PM. The hour field is set to 17 and the minute field is set to 30.
Here are some of the most common questions I receive about the Divi Date Time Picker.
If you don’t see your question here, click here to visit my contact form.
This plugin is powered by and requires Elegant Theme’s Divi Theme for WordPress, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever. (The above link is my affiliate link – if you purchase Divi through that link I may be compensated at no cost to you)