The quick version of how it works
To add a date or time picker to your contact form module, all you need to do is:
- add a normal Divi Contact Form module to a page.
- add a standard text input field to the form.
- Activate the date/time picker toggle.
The Date Picker
Basic Date 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 visibile. You can then set the Picker Type to Date.
Only allow dates after today
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.
Minimum Date (Hard)
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 January 1st, 2019 (2019-01-01).
Minimum Date (Rolling)
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) .
Maximum Date (Hard)
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, 2020 (2020-01-01).
Maximum Date (Rolling)
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).
Disable Specific Days of Week
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.
Disable Specific Dates
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 2019 has been disabled.
Enable Date Range
In the Select Type dropdown, select Range of Dates from the list of options.
Custom Date Format
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
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!
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.
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.
Is there a custom module I need to use?
What is the license for this plugin?
Currently there is only one license for this plugin: Lifetime with unlimited updates. Once you purchase the plugin, you’ll get access to updates and you can use the plugin on unlimited sites.
Can I have more than one datepicker on a page?
Does this impact my GDPR compliance?
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)