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. in that field’s Field ID, write either datepicker or timepicker.
  4. add any additional strings (outlined in the sections below) to the Field ID after datepicker or timepicker to take advantage of other features.

Date Picker Features

R

Min date

R

Max date

R

Only allow dates after today

R

Disable weekends

R

Date range

R

Date format options

R

Inline embed

Time Picker Features

R

Min time

R

Max time

R

24 hour time

R

Adjust hour increment

R

Adjust minute increment

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

By simply using the string datepicker in your field ID, you will be enabling the datepicker option on it.

Only allow dates after today

To prevent the user from selecting dates in the past, add _starttoday to the Field ID.

Disable weekends

To disable weekends from being chosen in the calendar, add _disableweekends to the Field ID.

Set minimum date

Set the earliest date users can choose from by adding the string _mindateYYYY-MM-DD to the Field ID. The field for this example has June 10, 2018 set as it’s minimum date, which would look like this: _mindate2018-06-10

Set maximum date

Like the minimum date, you’re able to set the maximum date users can choose from by adding the string _maxdateYYYY-MM-DD to the Field ID. The field for this example has June 10, 2019 set as it’s minimum date, which would look like this: _mindate2019-06-10

Date Range

Need to allow the user to select a date range on a single date picker field? No problem, add the string _daterange to the Field ID and you’re good to go.

Easier to Read Dates

If you prefer to show dates that are a little more friendly for users to read instead of the standard YYYY-MM-DD format, you can add the string _nicedate to show the date as something like “19 August 2018″ or “August 19, 2018″. The custom date format can be set on the plugin settings page.

Inline Calendar

Prefer to show an inline calendar? This plugin can do that too. Add _inline to the Field ID and you’re good to go.

The Time Picker

Basic Timepicker

To show a timepicker instead of the date picker, add timepicker to your Field ID.

Min Time

You can set a minimum time so users cannot select a time before the minimum time by adding _mintimeHHMM to your Field ID, where HH are the hours (with leading zeros) and MM are the minutes (again, with leading zeros). The HHMM should be in military time.

In this example, the minimum time is set to 8:00 AM so the string added to the Field ID is _mintime0800

Max Time

Likewise, you can set a maximum time so users cannot select a time AFTER a certain time by adding _maxtimeHHMM to your Field ID.

In this example, the maximum time is set to 5 PM so the string added to the Field ID is _maxtime1700

24 Hour Time

If you’d prefer to shop time in 24 hour format, you can add the string _24hour to the Field ID.

Minute increment

By default, the time picker uses 5 minute increments but you can adjust this by adding _mnstep followed by an integer. For example, _mnstep30 to set the step to 30 minute increments.

Hour increment

By default, the time picker uses 1 hour increments but you can adjust this by adding _hrstep followed by an integer. For example, _hrstep2 to set the hour step to 2 hour increments.

Combining Features (the fun part)

Date range with friendly dates starting from today.

You can combine as many different options from the examples above to make date/time pickers that suit your needs.

To use multiple options, simply combine them into a single string in the Field ID field. This example uses: datepicker_daterange_starttoday_nicedate

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

Make sure options are separated by an underscore character. This example uses timepicker_mintime0800_maxtime1700

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.

What is the license for this plugin?

Currently there is only one license for this plugin: Lifetime. 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?

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