Support » Plugin: Contact Form 7 » Datepicker not working?

  • SmeXhy


    Hi, when I use tags [date] is there supposed to be datepicker UI shown after the click on the field? Because in my case it’s acting like a normal text field, so I am confused what’s weong or what is the differenxe between normal and date field. Can you please help me out? Thanks.

    Also I am not sure why it’s working on iOS safari but not on macOS safari.

    I am using latest versions of everything, including my macOS and Safari.

    • This topic was modified 1 year ago by SmeXhy.
    • This topic was modified 1 year ago by SmeXhy.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Neil Murray


    Contact Form 7 has some Datepicker support via the new HTML5 date input type (see but this is currently only supported on some browsers – see

    Contact Form 7 does provide jQuery UI-based fallback for the date and number input fields. See

    You can now also use Contact Form 7 Controls to implement this without writing any code – use the “Enable HTML5 input type fallback” option.



    Hey thanks for your reply,

    i faced a similar issue with Safari and the Datepicker. The Problem is, that the fallback option is also not working. The Date-Field (in Safari) expects the date in the following format: YYYY-MM-DD. Which is far from intuitive. Do you have an advise how to work around this problem?

    Best regards



    What’s really odd is that safari on iPhobe supports this but the macOS safari doesn’t.

    I will try the plugin you linked and let you know.

    Enabling the fallback option in functions.php solved it for me. Some older posts about the same issue talk about an additional css tweak, but that doesn’t seem to be necessary any more.

    However the fallback date picker just shows a blank field until a date is chosen with the picker. When a user wishes to type in the date, he/she has no way of knowing the expected format as said before. The datepicker on the other hand is quite annoying to use, since there is no separate selector for the year. This means users have to click back month by month until they reach the desired year, or decide to type the year (date) instead which they don’t know the format for.
    A solution would be to use a placeholder indicating the desired format, but since the html 5 field can use a different format (Which is defined by the browser I think and possibly also different in each browser) it is not possible to do this either.

    So safari (and IE) users are left with a confusing and bad experience, whichever way they decide to use the field.

    Is there a way to just define the format and use this in every situation (html5 or fallback)? And related to this, the automatic html 5 placeholder indicating the format is shown in the browser language, but I would prefer to have the language consistent on the whole (non-English) website. Is there a way to set this without using a fixed placeholder, since to format is not constant?

    In conclusion; I would like to have two additional settings for the date field:
    1: set the order of the day, month and year
    2: the locale of the field (to match the language of the site)

    This was a long post, I hope you don’t mind me elaborating on your issue, since I didn’t want to start yet another thread on the same topic.

    Hi, I kept having the issue in Safari with the datepicker just showing a blank field and when you clicked on it nothing happened and I when I tried to enter a date and submit the form it just kept coming up with an error message saying ‘The date format is incorrect’. After a couple of hours of searching for a fix and trying things out to see if they work, I found a combination of 2 fixes from different people who posted in this forum worked for me:

    Add this script into your function.php

    add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

    Then you also need this in your custom CSS:

    div#ui-datepicker-div {z-index:1000!important;}

    The date field still looks blank, but then when you click in the field, the datepicker pops up showing the calendar!

    I hope it works for someone else like it did for me!

    • This reply was modified 4 months, 2 weeks ago by core365.
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.