Divi is one of the most used themes on WordPress and one of the latest updates introduced a ton of new features for the Contact Form module. However a simple yet useful input type missing is a date picker. Might not be used by the masses, but it’s very useful for some cases. For a recent project I needed to build a contact form that would work as a booking request form, so a date picker field would be a valuable addition to the arrival and depart date fields. I found an easy way to enable a date picker on the contact form using this plugin:

WP Datepicker

With this plugin enabled, what you need to do is give a unique Field ID to your field, when editing the field you want to convert to a date picker, in the Contact Form module. For my project I used ‘date-arrival’ and ‘date-departure’.

Then you’ll use those IDs to tell the WP DatePicker plugin which fields to convert to date pickers. Go to Settings > WP DatePicker and add the following to the ‘Selectors’ field:

input[data-original_id='date-arrival'],input[data-original_id='date-departure']

Basically you’ll need to add input[data-original_id='your_field_id'] to the selectors field and repeat that if you have more fields. If you copy/paste the code from here, make sure to re-write the ‘quote’ signs, since they might get changed in the copy/paste.

When you save these changes you should have your contact form fields converted into date pickers.
Give it a try below:

7 + 15 =

Date and Time Picker

After some users came up with the need of also having a time picker in the field, I decided to develop my own plugin to do this, since there was none available.

Date Time Picker Field

This plugin will work the same way as the other one mentioned above. The main difference is that it will also allow you to enable a time picker if needed, to specify the time together with the date. You can decide to use it only with the date calendar or you can use it with a time picker also. This is how the field with date and time picker will look like in a divi form field:

2 + 9 =

Here are some screenshots of how I implemented the date and time picker in the field above.

Not so hard, right? Hopefully Divi will include a date-picker or date-time-picker option for the contact form fields at some point, but until then these workarounds are easy enough to implement.

Do you want to have access to thousands of assets for your webdesign projects?

Web developer based in Porto, Portugal, working mostly with WordPress.

Disclosure: Some of the links in this blog are ‘affiliate links.’ This means if you click on a link to a commercial product and purchase the item, I will receive an affiliate commission.