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.

59 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

      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

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.