A Mobile-friendly & Lightweight Date/Time Picker for Divi.

Easily add custom date and time pickers right to Divi’s Contact Form module.

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:

  1. add a normal Divi Contact Form module to a page.
  2. add a standard text input field to the form.
  3. Activate the date/time picker toggle.

    Date Picker Features

    R

    Min/Max date

    (Select a hard date or rolling dates that update automatically.)

    R

    Disable specific days of the week

    R

    Disable specific dates

    R

    Select date range

    R

    Select multiple, non-consecutive dates

    R

    Date format options

    R

    Set language and localization on a per-picker basis

    R

    Completely customize the appearance to match any theme

    Time Picker Features

    R

    Set Min/Time time

    R

    12 hour/ 24 hour format

    R

    Adjust hour increment

    R

    Adjust minute increment

    R

    Completely customize the appearance to match any theme.

    The Date Picker

    Note, this page is just a demo. None of the forms below will actually send any emails so feel free to play around with them.

    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.

    Select Multiple, non-consecutive dates

    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.

    Localization

    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!

    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

    Custom Design

    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.

    The Time Picker

    Basic Time 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.

    24 Hour Format

    Set the Time Format dropdown field to 24 Hour.

    Minimum 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.

    Maximum Time

    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.

    Combining Features (the fun part)

    Date range that only allows users to select dates within the next 2 weeks.

    Time picker that only lets you choose times between 8 AM and 5 PM

    FAQ

    Still have questions?

    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?

    Nope! This plugin allows you to use the default Contact Form module that comes standard in Divi.

    Can I have more than one datepicker on a page?

    Absolutely. You can have as many as you want on the same page. You can have as many as you want on the same form too, if you’d like.

    Does this impact my GDPR compliance?

    The plugin uses a lightweight javascript that gets served directly from your web host so no external calls are made. Your GDPR compliance isn’t affected.

    IMPORTANT

    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)

    Share This