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

Posted by Carlos Moreira

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.

98 Replies to “Date picker in Divi Contact Form”

  1. Hi there,
    i tried and did everything by the book but it is just not working…what could i be doing wrong?

    Reply

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

      Reply

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

        Reply

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

          Reply

  2. Hi Carlos,

    Can you help me, too? I tried but did not work?

    Reply

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

      Reply

      1. Thank you Carlos,
        I solved.
        The problem was with β€œquotes”.

        Reply

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

    Reply

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

      Reply

  4. Thank you Carlos. Great plugin, great guide.

    Reply

  5. 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!!

    Reply

    1. 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’.

      Reply

  6. Thanks a lot for your tutorial! Saved me a lot of time and the day too πŸ™‚
    Works great for me!

    Reply

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

    Reply

    1. 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’.

      Reply

  8. 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?

    Reply

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

      Reply

  9. My is not working too … what have i done wrong?

    Reply

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

      Reply

      1. Sorry but it still won’t work πŸ™

        Reply

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

          Reply

  10. Michal from DoZwiedzenia.pl January 3, 2018 at 2:44 pm

    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”

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

    1. Hi Eniko, just visited the page and it seems to be working for me: https://prnt.sc/i0n9ic

      Reply

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

        Reply

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

    Reply

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

      Reply

  15. Karl Haakon Saether January 29, 2018 at 12:00 pm

    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?

    Reply

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

      Reply

      1. Karl Haakon Saether February 10, 2018 at 10:03 pm

        Alright. Thank you πŸ™‚

        Reply

  16. 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?

    Reply

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

      Reply

  17. Thank you for this Carlos! Exactly what I was looking for!

    Reply

  18. Felix Onyesom May 8, 2018 at 3:18 pm

    Thanks you just saved me a lot of stress. I worked perfectly

    Reply

  19. 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)

    Reply

    1. The plugin only supports the date field.

      Reply

  20. Simon Vetterli May 23, 2018 at 12:49 pm

    Hi Carlos

    It worked so far.

    Do You know, how I can define mindate and maxdate?

    Regards,
    Simon

    Reply

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

      Reply

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

    Reply

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

      Reply

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

        Reply

        1. Don’t bother yourself, everything fixed.

          Thanks again.

          Reply

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

    Reply

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

      Reply

  23. Thank you! Works like charm!

    Reply

  24. Thanks Carlos works great.

    Thing is I need a time picker now?

    Any ideas?

    Thanks Danny

    Reply

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

      Reply

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

      Reply

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

    Reply

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

      Reply

  26. 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”)

    Reply

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

      Reply

  27. Hi Carlos,

    I have tried everything on my Divi builder and WP Datepicker but it’s not working. Can you please help?

    Thank you

    Reply

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

      Reply

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

    Reply

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

      Reply

  29. Hi Carlos, great work! Would it be possible to only enable some specific time-intervals? πŸ™‚

    Reply

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

      Reply

  30. 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?

    Reply

  31. I am not able to get the Month and Day language correct.

    Reply

    1. Hi Paul!
      Can you provide more info? Which one of the suggested plugins are you using?

      Reply

  32. 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?

    Reply

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

      Reply

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

    Reply

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

      Reply

  34. 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)

    Reply

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

      Reply

  35. 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?

    Reply

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

      Reply

  36. 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!

    Reply

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

      Reply

  37. Thanks mate it worked πŸ™‚

    Reply

  38. merci beaucoup; votre plugin Date Time Picker Field fonctionne parfaitement πŸ™‚

    Reply

  39. Hi Carlos. This doesn’t work anymore. Any help? Thanks.

    Reply

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

      Reply

  40. Hi Carlos,
    great plugin, thanks. One question: Is it possible to exclude days (for example weekends)?

    Best regards,
    Mathias

    Reply

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

      Reply

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

    Reply

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

      Reply

      1. 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!!!

        Reply

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

          Reply

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

    Reply

    1. Hi Armo! You’ll have to create custom css for that. The plugin won’t have any custom styling options unfortunately.

      Reply

  43. 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!

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

    1. Hi! Seems it’s a problem with your selector. Make sure the ID is lower case. This way:

      input[data-original_id='datum']

      Greetings, Carlos

      Reply

  46. Thanks. its working perfectly for me.

    Reply

  47. Brilliant still works on Divi 4.0

    Thanks for the awesome guide!!!

    Reply

Leave a Reply to Armen Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.