Date picker in Divi Contact Form
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 helped to develop a plugin that allows you to do this and also has the extra option of enabling a time picker. The plugin is now maintained by InputWP.
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.
114 Replies to “Date picker in Divi Contact Form”
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Hi there,
i tried and did everything by the book but it is just not working…what could i be doing wrong?
Hi! If you share the link to your page I can check what could be missing. I’ll keep it hidden from the comments section once I check it.
Cheers, Carlos
Hi Carlos
Would love some of your help. Your pluggin is great but I am having some issues.
I have just installed your date picker with the Divi theme and if you have alook the formatting is totaly wrong.
https://sagressunstay.com/contact-us/
How can I make it neat and tidy?
Please advise
Armen
Seems your css is making the font bigger. You need something like
.ui-datepicker-calendar * { font-size:0.9em !important; }
to make the font small again. Hope it helps.
Hi Carlos,
Can you help me, too? I tried but did not work?
Hi! I checked the URL you left in the other comment and it seems it’s just a problem with the “quotes” in the selector field. Maybe they got changed in the copy paste. Single quote is preferred, but double quote might work also. Re-write the quotes and check if it makes it works. Cheers
Thank you Carlos,
I solved.
The problem was with “quotes”.
How can I download your plugin? The link to the wordpress plugin directory takes you to the home page and when you search I can’t find the plugin
Hi! The link is https://wordpress.org/plugins/wp-datepicker/ If you click the title that says ‘WP DatePicker’ it should take you to the correct page. Hope it helps! Greetings, Carlos
Thank you Carlos. Great plugin, great guide.
Hi Carlos,
Your tip works perfectly for what i need to create. Only one thing i’m not sure about. Is it possible to change the way the date is shown on the contact form? For example: At this time it’s showing Month / day / year and this should be Day / Month / Year.
Thank you for this article!!
Hi Bart! You should find the option to change the date format at the bottom of the WPDatePicker settings page. You can use the option ‘dd-mm-yy’.
Thanks a lot for your tutorial! Saved me a lot of time and the day too 🙂
Works great for me!
Hey thanks for the article. very helpful. I got it up and running but how do I change the date format to show after input dd-mm-yyyy? By default its mm-dd-yy
Hi! You should find the option to change the date format at the bottom of the WPDatePicker settings page. You can use the option ‘dd-mm-yy’.
I use this to let people enter their birthdate. Is it somehow possible to let them choose the year first instead of clicking back through all the months year by year?
From the screenshots I see for the Pro version of the plugin mentioned, it seems you can enable a month and year dropdown. This would make the task of selecting a birthdate much easier I guess. Hope it helps.
My is not working too … what have i done wrong?
Seems it could be a conflict with another plugin that also uses jQuery.
You can try to add this custom JS code to your page, maybe using the ‘intergration’ option from divi:
https://pastebin.com/raw/Nmbd6PWM
Sorry but it still won’t work 🙁
It’s for sure a javascript issue. I performed a quick test and that code seemed to work. You’ll have to contact the author of the plugin (it’s not me) and ask for proper support. Unfortunately I am not able to help much more.
Thanks for this plugin. It will not be the same as a regular reservation system, but it helps alot for travel websites. I am planning to use it on one of my hotel directory in Poland and to tell the truth, for very long time I dod not know how to handle this issue. Encountered this topic by mistake.
One question – to which update of Divi you reffer by saying “latest update”
Hi! Glad my blog post was helpful! The new contact form module from divi was introduced on version 3.0.51 released in June 2017. It has a lot of new options, but unfortunately not a date field. That’s why this is helpful. Cheers, Carlos
Hello, I have added your plug in to my contact form on this page [link-removed]
Unfortunately it does not work. It does work in the preview in the Divi Builder (not visual builder) but not on the live website. What might be the problem? Thanks for the help.
I’m not sure why it’s not working, would have to debug better, but it could be because it’s inside the lightbox. Try adding the contact form outside the lightbox, just to check if this is the issue. Cheers, Carlos
Hi Carlos
I’ve tried your tutorial but unfortunately, it is not working for me. I was wondering if you could give me an advice. If I want to add the date and time picker field to my form where the ID of the field is Calendar what is the exact code I have to insert?
Thanks for the help.
The code should simply be
input[data-original_id=’calendar’]
If it still doesn’t work, if you share the link to the page where you have the field, I can try to check what could be missing.
Hi Carlos
Thank you for your answer. It still doesn’t seem to work. I have overtyped the quote marks as well just in case but still nothing.
The link is magna-hungaria.co.uk/contact and this should be at the bottom part of the site. I appreciate your help.
Thank you
Eniko
Hi Eniko, just visited the page and it seems to be working for me: https://prnt.sc/i0n9ic
Hi Carlos,
thank you for checking. It does in fact work on other devices. I should have checked it. Thanks again for taking the effort and checking it for me and also for the great solution.
I tried the above as well and have a number of sites I would like to use it in Divi but it is not working for me either. I did the script as well no effect.
Hi Doug. Most likely a javascript conflict somewhere. Check your browser’s javascript console to see if there’s any error being logged. You can try to contact the author of the plugin to see if he can help also.
Hi! Thank you for posting this. It is just what I was looking for. I get the plugin to work and everything is fine, except for one issue which make it look kind of buggy: I am using Divi, and the title of the field is inside the box. When I press the box, the date picker appears, but when I have chosen the date it appears on top of the title text making it unreadably. If i press the field once more, the title text disappears, but I would prefer it to disappear first 🙂 Do you know a solution to this?
The placeholder should disappear when the date is picked, like in my example, so something must be happening that is keeping the placeholder, most likely a javascript issue. I could check what could be happening, but first I would try to contact the author of the plugin, he might already have a solution for this. Cheers
Alright. Thank you 🙂
I am using this on 2 client sites, knockoutboxingde.com and knockoutboxingde2.com – When you select the date on mobile, it won’t save it and put it in the field. It works fine on desktop, but not on mobile. Help?
Seems the date is being saved, but not displaying. Could be a css or javascript issue, maybe a conflict with another plugin. I would try disabling a few plugins to see if it would make a difference and try to find out if that’s the case. Try contacting the plugin author on wordpress to see if he might have a solution.
Thank you for this Carlos! Exactly what I was looking for!
Thanks you just saved me a lot of stress. I worked perfectly
hi, how i can put date, hour and local zone, for example
all this, in separate fields. may i ask the code for each field please.
12-05-2018 05:00pm (GMT-5)
The plugin only supports the date field.
Hi Carlos
It worked so far.
Do You know, how I can define mindate and maxdate?
Regards,
Simon
Hi Simon, the plugin itself doesn’t have that option, you would need to edit the code and add those settings manually in the code, using the proper format: https://jqueryui.com/datepicker/#min-max
Hello,
Great plugin, I got it working but I have a question. How do I modify email elements so that the chosen date display in the report email I receive?
Thanks
Hi! The dates selected should be included in the message normally, like the other fields.
Make sure everything is correct and the date field is included in the Message Pattern option of the divi’s contact form. Hope the info helps. Greetings, Carlos
Unfortunately the plugin stopped working. It was working perfect and while i was doing tests to fix the email report, it stopped working. If you have the time please check
https://hellenic-fantaseasailing.com/prices-booking/ the fields “From” and “To”
Thanks
Don’t bother yourself, everything fixed.
Thanks again.
Hi Carlos!
Thanks for your job, the plugin works great!
Is it possible to customize the calendar css?
Thanks in advance for your reply!
Regards,
Etienne
Hi! Yes, you can style it with CSS. You can add the custom css to the custom css field wordpress provides in the customizer. You can search google ‘customize jquery ui calendar’ and it might provide you with some tips on what css you can use. Hope it helps. Greetings, Carlos
Thank you! Works like charm!
Thanks Carlos works great.
Thing is I need a time picker now?
Any ideas?
Thanks Danny
This only works with date pickers unfortunately. You would need a custom solution to load this script https://xdsoft.net/jqplugins/datetimepicker/ into your wordpress. I might develop a plugin myself with this functionality since it seems it would be useful.
Hi Dan, I developed a draft for a plugin similar to this one but that includes a time picker also. If you want to try it, let me know. UPDATE: I have now developed and published the plugin with the date and time picker and included a link in this article also.
Hi, Trying to get datepicker to work with Divi Contact form. Do I create a new contact field and assign it an ID, for example, datepicker. DO I simply assign #datepicker in the WP Datepicker settings and it should work many thanks
You have to create a new field, set a unique ID and then use that ID in the datepicker settings page as explained above.
Greetings, Carlos
Hey Carlos, thanks so much for developing this plugin! It’s super useful and exactly what I was looking for. I’ve got a quick question regarding the Date and Time picker — in the input field it overwrites the ‘Title’ and displays the default text as “DD/MM/YYYY HH:MM PM” which is auto loaded as the current date and time. Is there any way to change this to the original title I want to use for the field? (ie. I would like to display “Select Meeting Date/Time”)
Hi Sid! Thank you for the positive words! For the next update I’ll include an option in the settings page to keep the original placeholder.
Keep an eye in the update notifications! 🙂 cheers
Hi Carlos,
I have tried everything on my Divi builder and WP Datepicker but it’s not working. Can you please help?
Thank you
Hi! You can try the other plugin mentioned on the article, developed by me, to see if it works. If it doesn’t there’s most likely a javascript error on your page. Check your javascript console to see the errors if that’s the case. Greetings, Carlos
Hello Carlos,
Everything works fine but when i check the website the label i use select date and time not using. It’s current time and date like this 07/26/2018 14:44. Can, you please tell me. How i display select date and time in the form field.
Hi! In the latest version of the plugin you’ll find the option ‘Keep Placeholder’ to keep the placeholder text you originally have. Hope it helps.
Greetings, Carlos
Hi Carlos, great work! Would it be possible to only enable some specific time-intervals? 🙂
Hi! This has been asked before, I might try to implement it. Currently the only way to do it would be to edit the source code of the plugin.
Hi my friend, I’m trying to do the same exact thing for a booking form on my new divi website, can you please share with us your final result?
Here’s an example: http://goodstay.pt/en/victoria-studios/
I am not able to get the Month and Day language correct.
Hi Paul!
Can you provide more info? Which one of the suggested plugins are you using?
Hello Carlos, Thank you for developing the date and time picker plugin, this is exactly what we need!! Is it possible to remove some of the time options, so people can only make reservations within opening hours?
Hi! This is something I plan to implement but it will take time, I can’t do it right now. You can however fork the plugin and make the necessary changes in the javascript file.
Hey Man!
Thank you very much for the plugin, I am getting a little bit confused like I have made 2 fields and assigned the same ID to both of them but after some time one field is changing its ID and its kinda big problem for me. One thing more, it’s not working properly on mobile view.
Hi! You should use unique IDs for each field and use selectors divided by a comma. Just visited the page you have left on the url field on mobile and it works well. Both calendars are displaying. Tested on Android. Are you having an issue on a particular device? Greetings, Carlos
Hey,
Hope you are doing great, I have downloaded your plugin and thank you very much for this absolute bang gift. I am into a little bit issue while passing the same id to two fields, ids are changing after some time and on a mobile view, I can’t see both calendar and time boxes.
(referring to my last comment)
Use a unique ID for each field. Divi shouldn’t change them unless you edit the fields. Visited your page on mobile and it was working. If you’re having issues on a particular device let me know. Greetings, Carlos
Absolutely love this thank you so much. I am trying to get it to work on a divi overlay as the calender appears underneath the overlay. Can you help with this?
Hi Jill! It’s better to open a support ticket in the ‘support’ tab of the plugin page sharing more details. If you’re using the ‘date time picker field’ this is where you would do it: https://wordpress.org/support/plugin/date-time-picker-field It will most likely be a CSS issue. Greetings, Carlos
Hi Carlos, this plugin looks amazing! I have one question can you specify times so it doesn’t show all hours of the day?
All the best, and great work!
Hi Jason! This can’t be done in the current version, but it’s something I plan to implement. Leave a comment here: https://wordpress.org/support/plugin/date-time-picker-field making this feature request and I’ll let you know when it’s available. Greetings, Carlos
Well done
Thanks mate it worked 🙂
merci beaucoup; votre plugin Date Time Picker Field fonctionne parfaitement 🙂
Hi Carlos. This doesn’t work anymore. Any help? Thanks.
Hi! Both plugins seem to be working well, as you can see in this demo page. Are you experiencing issues on a particular browser or platform? If you are trying to apply this on your website and it’s not working, check for javascript errors, those would be the most common cause for the date picker not work.
Hi Carlos,
great plugin, thanks. One question: Is it possible to exclude days (for example weekends)?
Best regards,
Mathias
Hi Mathias, thank you for feedback. This is something I plan to implement on my plugin at some point, but currently it’s not possible to do it, sorry. Greetings, Carlos
Would it be possible for you to add the following Date/Time Format for the German language?
‘DD.MM.YYYY’ => __( ‘Day.Month.Year’, ‘dtpicker’ ) . ‘ ‘ . date( ‘d.m.Y’ ),
and a selection for the start of the week for Monday?
Cheers
Patrick
Hi Patrick, yes, I can do that. I’ll update the version on wp repository soon. The version on github already has these features if you want to try: https://github.com/carmoreira/date-time-picker-field
I added the new date format and the start of week will read from the option selected in the general settings of your website.
Greetings, Carlos
Appreciate this plugin. Really great job Carlos!!!
Can you also set option to disable future dates? I am using this date picker to enter Date of Birth. So would want the future dates to be grayed out. Thanks for this wonderful little plugin!!!
Hi! Thank you for the feedback. Currently not possible in the current version, but maybe an ideia for a future update for sure! Greetings, Carlos
Hi Carlos
Thanks for this pluggin.
I am using it with teh Dvid theme.
I have followed your guide on how to install it however it doesnt look great on my page, can you please tell me how i can get the drop downs looking neat and tidy?
Thanks in advance
Armo
Hi Armo! You’ll have to create custom css for that. The plugin won’t have any custom styling options unfortunately.
Hello Carlos! i’m having an issue, in my page puntadechoros.cl/contacto-y-reservas when i type my name on the Name Field, te fields of the dates dissapear.
I have tried everything, thanks in advanced!
Hi! Just visited the page and it seems to be working. Could it be that it’s your browser auto-complete that is clearing the date? Does it happen if you add a different name or try in a different browser?
Greetings, Carlos
Hey Carlos,
I have the plugin installed and activated. I have the DateTime Picker popping up upon a click to the field and it looks great. However, when I select a date and time, it simply disappears without the selected data transposing to the field box. I just disappears, but upon clicking the field box again, it once again displays the picker, and again, the same. I am not sure if my problem is something to do with javascript, or perhaps within the plugin settings.
Any help in troubleshooting would be greatly appreciated.
With Respect,
J.Michael
Hi! Thank you for the feedback. Does it happen on all browsers or a browser in specific? There’s a combination of settings on the current version which would cause the picker to work only on a second click, but it seems you’re experiencing something different. I’m about to release an update with some new features and bug fixes, this will be version 1.7.5. If the problem persists after this new update (should be released in the next few days) leave a comment on the support forum for the plugin here: https://wordpress.org/support/plugin/date-time-picker-field/
Greetings, Carlos
Hello Carlos. I don’t know why but I tried everything but the date picker does not show up. What can I do? My website is http://www.al-tavolaccio.de/reservieren/ and I want the date picker to show up under “Datum“
Looking forward to your help
Hi! Seems it’s a problem with your selector. Make sure the ID is lower case. This way:
Greetings, Carlos
Thanks. its working perfectly for me.
Brilliant still works on Divi 4.0
Thanks for the awesome guide!!!
Hello Carlos,
Can I have your help? Is the plugin still working with the latest divi version? I’ve tested with this last link http://www.al-tavolaccio.de/reservieren/ (in different browsers) and is exactly what happens with mine. Nothing 🙂
Any Clue?
Thanks.
Hi Luis! Thank you for using the plugin.
Please use the official support forum for support messages:
https://wordpress.org/support/plugin/date-time-picker-field/
But looking at your page really quick, it seems your selector was not added correctly. Review the instructions, your selector should include [data-original_id]
Greetings, Carlos
Hello! Thanks for your tutorial, but I try to do like you, it’s not work
Hi! Please open a support ticket at https://wordpress.org/support/plugin/date-time-picker-field/
HI Carlos,
great and simple tutorial. Thanks! And cool that you give out the plugin for free.
I had a field which I also wanted for a Check-in Date and Check-out date.
Now, it shows only the current date and not the text anymore: “Check-in Date” and “Check-out Date”. Can I add the text additionally?
Greetings,
Lars
Hi Lars
you should be able to control that by selecting the option ‘keep placeholder’.
HI Carlos,
Great tutorial but I can’t seem to make it work. What could I be doing wrong? I have corrected the “” but still not working. Do I need to tick something in field options (it’s on input field now)?
Thanks!
Hi Sonia
I would have to check what could be missing. You can open a ticket here: https://wordpress.org/support/plugin/date-time-picker-field/ sharing the link to your page. Greetings, Carlos
Thank you Carlos, finally made it work – however having some issues with how it displays but will open a ticket for that as you suggested 🙂
Ola Carlos!
We have this humble website of our B&B (residencial-sjuliao . com) at Figueira da Foz, and we would like to make the field for date simpler.
But we are using WPForms – not sure your plugin would work fine in it.
The fact is that the date picker displays fine, but when selecting a date, it doesn’t show in the field. Is it just a matter of compatibility between the form and your plugin?
Cumprimentos
Most likely the css selector is targeting the input container and not the input itself. With the right css selector it should work.
Hi Carlos Is there a way to add a Calendar icon? By clicking on the icon the calendar picker then opens?
You would need to use your own css to do that. At the moment the plugin itself doesn’t have that option.
How I can change colors and customize with CSS? I tried hours but CSS is not working
Hi Carlos,
I’m making a request form including 20 date questions.
To use date time picker I made 20 fields with different names.
But, they don’t work.
What am I doing wrong.
input[data-original_id=‘gebdatum-aanvrager’],input[data-original_id=‘gebdatum-partner’],input[data-original_id=‘gebdatumvolw1’]
I’m getting mad.
Hi
The code seems to be correct. If possible open a ticket here: https://wordpress.org/support/plugin/date-time-picker-field/ sharing the link to the page where you have the form. Greetings, Carlos