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 have developed a plugin that allows you to do this and also has the extra option of enabling a time picker.
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 plugin which fields to convert to date pickers. Go to Settings > Date Time Picker 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.
Here are some screenshots of how I implemented the date and time picker in the field.
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.
5 Responses
Hi,
Thank for this super extension !
Do you know if it is compatible with the “Checkout Field Editor for WooCommerce” free version extension?
I mean, how can I put the Date picker visible in one additionnal field of the checkout editor? I tried with the [datetimepicker] but it doesn’t work.
Thanks a lot!
Myriam
Hello Myriam,
Thanks for the kind words.
We tested it out and after inserting these values https://prnt.sc/yqmuuz even tho that it shows the calendar in the frontend, it’s not actually filling the input with the selected values.
But the good news is that in the next release, we will try to make it compatible with a lot more 3rd party plugins.
Keep an eye on the updates.
Thank you!
Hello,
We are implementing this on Divi for an appointment booking form. But on the form we need one date-time picker for the actual appointment date and time, and further down the form we have a birth date field for which we would like to have the date picker only.
How can we implement this?
Hello Christopher,
To be able to have multiple pickers (Date AND/OR Time) you will need to upgrade to PRO. This way it will allow you to define one of them as a date-time picker and the other one as a birth date.
https://www.inputwp.com/pro
Let me know if this helps.