Date and Time Picker field on Contact Form 7

Most websites online will need a contact form and Contact form 7 is without any doubt one of the most popular plugins on WordPress with 5+ million active installations and growing. It’s amazing how simple and versatile the plugin is, allowing any form to be extended using simple tricks.

The plugin comes with support for ‘date’ fields, but for some projects you might need a datetime field. I have developed a plugin that can help you with this and I’ll explain how you can use it with CF7.

Install the Date Time Picker Field

Although the plugin was not built to work directly with CF7, it’s compatible with any form you might have on your website, Contact Form 7 included. You’ll just need to follow some simple steps.

Add a normal text field to your form

The first step is to build your form. For the fields you want to convert into datetime fields, simply use text fields. You can name the field whatever you want, but you will need to pay attention to the class name you add:

It doesn’t necessarily need to be ‘datefield‘ it just needs to be something unique and that you remember after, when setting up the Date and Time Field plugin.

Setup Date and Time Field plugin

Once you have your form, you need to go to Settings > DateTime Picker. In the CSS Selector option, add the name of your class, preceded by a . (period). In this case .datefield This will be the css selector the plugin will use to look for the field and convert it into a date and time field:

And that’s it! You can explore the other settings available in the plugin to optimize the date time picker.

The plugin in the future might include a direct integration with CF7 if this becomes a popular request. Leave a comment if you have any suggestion or request.

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.

113 Replies to “Date and Time Picker field on Contact Form 7”

  1. Hello.
    Nice Plugin and thank you for your work. But in my case, it don´t works. I worked with CF7 and a Theme. The Date/Time-Picker-Calendar is visible but after picking a Date und Time, the Datetime would´nt visible in den Textfield. I dont have an idea, what´s here the problem…do you can help me?

    kind regards, Jörg Müller

    Reply

    1. Hi Jörg. I would have to see your page to understand what’s happening. If possible share the page where this is happening and I’ll check. Greetings, Carlos

      Reply

    2. Did you find a solution to this problem? I am having the same issue.

      Reply

  2. Hi Carlos
    How to change the year to limit to 2018 and add more pass year?
    Thanks

    Reply

    1. Hi! Currently this is only possible by changing the source code of the plugin, in particular the javascript file. I plan to implement more options in future updates and this might be one of the new features.

      Reply

  3. Love the plugin. Works perfectly. Couple of things I would like to see added.

    1. Using this plugin for a client who has their office open at a specific time on specific days. Ex. Monday 12-3pm and Tuesday 3-6pm. Is it possible to specify appointment time based on the day?

    2. Would like to change the color on hover over time as it doesn’t match the color scheme of the website.

    Great work!

    Reply

    1. Hi! Currently that can only be done by changing the source code of the plugin. Consider that the plugin this script: https://xdsoft.net/jqplugins/datetimepicker/ which allows to specify times, so that would be the change that needs to be made. I plan to implement new features to the plugin, but might take time. The hover colour can be done with custom CSS. Something like:

      .xdsoft_datetimepicker .xdsoft_calendar td:hover { background:#6699cc !important; }

      Hope it helps.
      Greetings, Carlos

      Reply

      1. Hi, how can I make it to select start-end dates instead of just 1 date?

        Thank you!

        Reply

        1. Hi! You can have the same class in different inputs, so you can have more than one date picker. However, they won’t interact with each other, the plugin is not ready for that in the current version.

          Reply

          1. Same issue. Does the PRO version of the plugin support interaction of the two date pickers?

          2. Pro version does allow interaction between 2 date pickers to create a date range. Example here: https://cmoreira.net/date-time-picker-wordpress-plugin/

      2. Question how can i do things like if i want thatdates in past can´t be selected ?

        Reply

        1. Hi Paul. In the settings page of the plugin there’s an option to disable past dates.

          Reply

  4. Hi Carlos,

    I also need specific time and days. Could you please help me with the code?

    Thanks!

    Br Dina

    Reply

    1. Hi Dina! Currently the plugin doesn’t provide this option, I’m sorry. If you understand a bit of code, you can look into the datetimepicker documentation here: https://xdsoft.net/jqplugins/datetimepicker/ and make the necessary changes in my plugin. Unfortunately at the moment I can’t do them for you, but hope the link helps. But I am planning to introduce new features in the plugin or create a premium version where this would be possible, so keep an eye for updates. Greetings, Carlos

      Reply

      1. Hi Carlos,

        Thank you for answer 🙂

        Could you please help me were to find the source code? I have downloaded the plugin, but the code doesn’t work.

        Reply

        1. The file you need to change is located inside /assets/js/dtpicker.js you’ll need to make changes to it and eventually minify it again. I recommend you change the name of the plugin to make sure automatic updates don’t overwrite your changes.

          Reply

  5. hello, is it possible to set the default time as blank instead of having a default time in the space? in case some fields are being hidden and unnecessary to fill in
    Thanks!

    Reply

    1. Hi! Try enabling the option ‘Keep Placeholder’ in the plugin settings page and set the placeholder for your field to be empty. That might work. Greetings, Carlos

      Reply

  6. Hi Carlos,
    can you help me with error red box that upper on CF7 when i choosing date and time .

    Reply

    1. Hi! Please open a support ticket on the wordpress plugin page here: https://wordpress.org/plugins/date-time-picker-field/
      Share the link to the page where you have the form and I’ll follow up when possible. Greetings, Carlos

      Reply

  7. I would like to place a placeholder function in the scheduling cell where I can enter eg. “Time” to see what the field means for the visitor. Can you help me in this?

    Reply

    1. Hi! The placeholder should be done on the Contact Form 7 side: https://contactform7.com/setting-placeholder-text/ in my plugin settings you’ll just need to enable the option to keep the original placeholder. Greetings, Carlos

      Reply

      1. Károly Csúcs April 14, 2019 at 2:31 pm

        Yes, I try, but not working. :/ Does not display anything.

        Reply

        1. Any update?

          Reply

          1. Hi @Nikolas if you’re having similar issues please open a support ticket on the plugin support page: https://wordpress.org/support/plugin/date-time-picker-field/

  8. Time needs to have an mandatory option

    Right now if you don’t actually select a time, a random time seems to show up and it looks odd.

    Reply

    1. Hi! Thank you for using the plugin and for your feedback. I’ll see what I can do to improve this in a future version.

      Reply

  9. Hello, I’ve successfully inserted your awesome plugin into my Contact Form 7 on my new, yet to be publishedwebsite. Everything works great but once the date and time is picked, it doesn’t load into the field. Any ideas?
    Thank you very much!
    Gary

    Reply

    1. Hi Gary! Thank you for the feedback.
      Hard to understand what could be happening without checking the page. Is it online? If possible create a ticket on https://wordpress.org/support/plugin/date-time-picker-field/ sharing the link to the page where the picker is and I can check what could be happening.

      Reply

  10. Hello, I try to use “Date and Time Picker field” with woocommerce. Therefore I add a field with the PlugIn “Checkout Field Editor for WooCommerce”.

    But there is a problem. By Clicking on the corresponding field opens the calendar. That’s OK. But after selecting a date and time, the data will not be included in the field. The field remains empty. Why?

    Parallel I use “contact form 7” on the same page. It works with cf7.

    Reply

    1. Hi! If you have Contact form 7 on the same page, probably the date is only being added to one of the fields. Try using different classes for each field and in the plugin settings use the 2 classes.

      Reply

  11. Hi,

    There, how do you add placeholder text so the user knows beforehand that it is for a date and time field?

    Reply

    1. Hi! Contact Form 7 should handle that part: https://contactform7.com/setting-placeholder-text/ just make sure to use a normal text input. You can also enable the option to keep ‘original placeholder’ in the date time picker settings page. Grettings, Carlos

      Reply

  12. Hi Carlos, awesome job! Your plugin works great!
    I think it would be amazing if it is possible to integrate the date and time with Google Calendar.
    What do you think?

    Reply

    1. Hi Federico! Maybe you could complement it with this plugin: https://wordpress.org/plugins/add-to-google-calendar-contact-form-7/ is this what you’re looking for? Cheers, Carlos

      Reply

      1. Very interesting, I’ll try it. Thank You!

        Reply

  13. What tag do you use to get the time and date to show up on the email you receive from the form?

    Reply

    1. Hi! This would depend on the name you used for your field. Refer to the Contact Form 7 documentation to understand better: https://contactform7.com/tag-syntax/ Hope it helps. Greetings, Carlos

      Reply

  14. Hello, your datepicker is the ONLY solution to the changing of the date format problem in Contact form 7.

    I only wanted to resize di 50px the height of the textarea which I set to contain the date. Why is it so large by default? class is as follow:
    wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required datefield
    but I cannot manage to shorten it.
    Many thanks and thanks again for having solved that problem that Contact form 7 developer still ignores these days and doesn’t care to solve.

    Reply

  15. Sorry, my fault, I used a textarea instead of simple text field. That’s why it was so large instead of being short like text fields. Forget about my former comment. Great job anyway. Thanks,

    Reply

  16. Hi, how do i show the date and time picked from the form in the email after people submit the form?

    Reply

    1. Hi! You’ll have to edit the email template and use the ‘tag’ for that field in the email. Check Contact Form 7 documentation for it: https://contactform7.com/tag-syntax/ Hope it helps.

      Reply

  17. Hello.
    Can this plugin not be able to select holidays?
    By the way, I want you to respond to Japanese holidays.
    Thank you.

    Reply

    1. Hi! There’s a field in the advanced settings to manually set dates to disable. You would need to add this dates manually, but it’s possible to disable holidays this way.

      Reply

      1. Thank you for answering immediately.
        I do not know where the fields to set manually are.
        I’m sorry, please tell me in detail
        Thank you.

        Reply

        1. You can go to Settings > Date & Time Picker > Advanced Settings > Disable specific dates

          Reply

  18. Hi Carlos, is possible to add a separator (for example @ or other char) in the field between date and time? To obtain some like this: 22-06-2019 @ 13:40.
    Can you advise me, which file i have to edit?

    Thank you

    Reply

    1. Hi Max, unfortunately this is currently not possible, but maybe an ideia for a future version. If it was as simple as making a simple edit in a file, it would be easy, but it will probably involve javascript to correctly parse the datetime value including that separator that might break parsers, or some kind of workaround. I’ll try to find a way to include this in future versions, but unfortunately at the moment this is not possible. Sorry for this.

      Reply

  19. Hi Carlos,

    As shown on wordpress.org website, the plugin was last updated 2 years back. So if I install the same, will it work properly and I hope it wouldn’t damage my website.

    Thanks
    Aakash

    Reply

    1. Hi Aakash! My plugin is updated monthly and it’s less than 2 years old, so maybe you checked a different plugin?

      Reply

  20. I understand all the steps… just cannot get this thing to actually appear on the form.

    In CSS Selector: .horafecha

    In contact form, I create a text field with:

    Elije dìa y hora llegada (requerido)
    [text* horafecha class:horafecha]

    But they are not talking to each other.

    Reply

    1. Double check the ‘When to Load’ option in the settings. If the problem persists, open a ticket in the support forum of the plugin, in the plugin repository and we can follow up there.

      Reply

  21. Hi Carlos,

    Thank you for this excellent plugin and it works perfectly for single date/time field and I have implemented it on several client’s websites without any hassle. Now I have this client who wants two date fields with “Check-In” and “Check-Out”. I was wondering if there is any way a user can only select “Check-Out” date later than the selected Check-In date. Or somehow integrate Dan Grossman’s Date Range Picker in a single field.

    Regards,
    Usman

    Reply

    1. Hi! Thank you for feedback. The plugin doesn’t have that option (yet) but if you’re confortable with javascript, you would basically need to implement this: https://xdsoft.net/jqplugins/datetimepicker/#range You could almost copy/paste it.
      With the plugin the datetimepicker script is already on the page, so you would just need some custom code like the one in the example to trigger the 2 fields the way you need. Hope it helps and I’m sorry for the current limitations.

      Reply

  22. Hi,

    Thanks for your nice plugin!

    I’ve got a feature request. Can you make it possible to make an option to set minimum time depending on the day? I’d like to set the minimum time of Thursday on 04:00 PM, but on Sunday on 11:00 AM.

    Hope you can help me.

    Kind regards,

    Inez

    Reply

    1. Hi Inez! In the advanced tab options, you can set custom hour options for each day. You should be able to do that there. The only catch is that you’ll need to list all available hours for each day, but it will work. Hope it helps.
      Greetings, Carlos

      Reply

      1. Thanks for your reply! It works:)

        Reply

  23. Hello i get this error “The date format is incorrect.” when using the plugin and i try to submit my form.

    Reply

    1. Hi! Most likely you need to change the type of your input from ‘date’ to normal ‘text’.

      Reply

  24. Hi Carlos,

    I’m making a dinner reservation form. So all I need is the date and the time people are making a dinner reservation for. No end time or anything.
    I followed your instructions but I must have done something wrong. It’s only showing an empty box.

    Could you help me out?

    Best regards,
    Martine

    Reply

    1. Oh, and when it’s possible it woud be great if people could only make a reservation between 18:30 and 22:30.
      Is that possible?

      Thanks so much!

      Martine

      Reply

      1. Hi Martine, yes, that is possible. You can set a maximum and minimum time in the plugin settings page.
        Greetings, Carlos

        Reply

    2. Hi Martine! Please open a support ticket here: https://wordpress.org/support/plugin/date-time-picker-field/ it’s easier for me to follow up there. Thank you! Greetings, Carlos

      Reply

      1. Hi Carlos,

        Thanks for your reply. I’ll open a support ticket right now.

        Best regards,
        Martine

        Reply

  25. Hi Carlos, thanks for the amazing plugin. I have a question, is it possile to show the day before the date and the time after selecting the date? Like Mon 21/10/2020 10:30.
    Thanks in advance for your answer

    Reply

    1. Hi Simone
      At the moment this is not possible unfortunately.

      Reply

  26. TypeError: ‘undefined’ is not a function (evaluating ‘Object.values(d)’)

    How can i fix it in Safari browser?

    Reply

    1. Hi! Please open a support ticket here: https://wordpress.org/support/plugin/date-time-picker-field/ sharing the link to the page where this happens and I’ll follow up there. Cheers, Carlos

      Reply

  27. Hello,

    great plugin, thank you so much.

    is it possible I can use multiple date time picker, lets say for 3 restaurant but different setting?

    Reply

    1. Hi! Currently it’s not possible, I’m sorry. The settings will affect all date pickers.

      Reply

      1. Hi!, Great plugin that does exactly what I want. I had a similar question to what Navaraj posted. Basically wanted to have 2 forms but each form would have a different set of times from the other. Is this something that you think will be added in the future?

        Reply

        1. Hi! Yes, this might be added in the future, but not in the near future. It might take some time until this is available unfortunately. Greetings, carlos

          Reply

    2. Update: Pro version available, where we can have different rules for different pickers: https://cmoreira.net/date-time-picker-wordpress-plugin/

      Reply

  28. Hey Carolos,
    What selectors do I use to style the time box that pops up? (Also the date. I’m not using that this time, but probably later.) I want to style the hover, and active colors, and make it a little bit bigger overall.

    Thanks!

    Reply

    1. Hi Julie
      The main selector is .xdsoft_datetimepicker .xdsoft_calendar
      If you see this page https://cmoreira.net/date-and-time-picker-for-wordpress/ in the comments a user shared some CSS that can be used.
      Hope it helps.
      Greetings, Carlos

      Reply

      1. Thanks Carlos!

        Reply

        1. Hey, I do know how to style elements with CSS and how to find an element, but I’m not having any luck with this. For example, when I hover over the time, it’s orange. The inspector says it’s .xdsoft_time, so I try and change it to green with hover, or active, and it does nothing. What am I missing here?

          Reply

          1. PS I’ve also been reading tons on the links you sent, but I can’t find the answer there either… I could send a screenshot if needed.

          2. This is a bit outside the scope of the included support, since it’s related with customization. But you can open a ticket here: https://wordpress.org/support/plugin/date-time-picker-field/ and I’ll try to follow up there.

  29. Thank you for this great plugin! It works well but only one little question:
    Whe i us the option “When to Load” with “Only when shortcode [datetimepicker] exists on a page.”, the datepicker isn’t loading. Is this not the right option to load the picker and all scripts for the page there are used only?
    Best Regards
    Mike

    Reply

    1. Hi Mike! Yes, that’s the correct answer. Did you add the shortcode [datetimepicker] somewhere on the page? Only this way the plugin knows to load the files on that particular page. Greetings, Carlos

      Reply

  30. Hi, after I’ve select the date & time. It shows “The date format is incorrect.” ?

    Reply

    1. Hi! Change your input type from ‘date’ to ‘text’. This way your browser won’t try to validade it has a date and allows the plugin to do the validation itself.

      Reply

  31. Hello. Is it possible for the datepicker to be always on? And not to have to click in the textbox in order to appear.

    Reply

    1. Yes, you can enable the ‘inline’ option.

      Reply

  32. still working great, thank you! If you need help for translating in german or italian, feel free to contact me

    Reply

  33. Hi, Unable to add date and time which is selected from date and time picker in contact form 7 to PDF which created in send PDF for contact form 7. Please advice how to add this.

    Reply

    1. Hi, I can’t support third-party plugins, not sure why it wouldn’t work, the date picker simply adds the selected date to the field.
      Make sure you’re using a text field and not a date field.

      Reply

  34. Hello,

    First.., thanks for this amazing plugin. but my need for this plugin is to show Date of birth. so we are installing this plugin correctly.., but it show current date inside the field. i want to show “Date of Birth” text as placeholder instead of current date.

    Reply

    1. Hi! Your form plugin should allow you to add a placeholder. Then in my plugin settings you can enable the ‘keep placeholder’ option.

      Reply

      1. Thank you.., Its working.. 🙂

        Reply

  35. Larry Seymour June 24, 2020 at 9:31 pm

    do you have instructions for divi?

    Reply

  36. works great, but is not working as required fields. can you improve this. i will pay you 30 euros for improvment, i think this one could be the number 1 datepicker-plugin. please reply.

    Reply

  37. Hello carlos,

    Can you please tell me how to add placeholder in your plugin ? please see (https://saharaedulive.com/register/) – i need to add “Date of Birth” text as placeholder instead of date. im trying to add in contact form 7. but its not working. please see below code.
    [text* dob class:cm-datepicker placeholder “Date of Birth *”]

    Reply

  38. Hello Carlos,
    Works Perfectly but display twice can you please give a solution for that ?

    Reply

    1. Hi
      Probably something wrong with your selector, maybe it repeats twice. Would need to check your page.

      Reply

  39. Hello Carlos,

    How could i use only time in contact form 7?

    Reply

    1. Hi. You’ll just need to disable the date picker and enable the time picker.

      Reply

  40. Contact form occurred error while submit form After using this plugin.
    Error is: “The date format is incorrect.”.

    PLEASE HELP ME TO SOLVE THIS ERROR.

    Reply

    1. Change the input type to text. That should fix the problem.

      Reply

  41. Hi, like you have Disabled Weekends, can you enable only the specific period available for selection?
    Example: Selection is available with starting date 01/01 and ending date 31/01, so user can not select anything before or after?

    Reply

    1. In Pro you have the option to set Minimum Date and Maximum Date.

      Reply

  42. Great plugin – thank you very much!
    Any way to make the calendar show Sunday to Saturday (instead of Monday to Sunday)?

    Reply

    1. Yes, you’ll need to change your WP settings, to have the week start on Sunday. Check your site’s general settings.

      Reply

  43. Hello, I want to disable today to the first 10 days in date pick… how I can do this?

    Reply

    1. Hi
      You can explore the minimum date options, with +10 days.

      Reply

  44. How to disable today and the next day date in the day?

    Reply

  45. Love you, sir. It Working.

    Reply

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