Contact Form 7 date field not showing in Safari!

[core365]

Hi, I’ve never used the date field for Contact Form 7 before, and in Chrome it’s all working fine, but when viewed in Safari, the default text that should be showing within the field ‘dd/mm/yyyy’ isn’t there and when you just type in the date and click ‘Book Appointment’ button, it says ‘The date format is incorrect’ and no matter what format you do it in, it doesn’t allow it! I’ve Googled this and it seems to be a known problem in Safari and the developer from Contact Form 7 doesn’t seem to be very helpful at all, so I’m hoping you wouldn’t mind taking a look please!

I’ve done 2 screen grabs for your reference, one from Safari and one from Chrome. It’s the field ‘Select Appointment Date’ - you’ll see the screen grab with the dd/mm/yyyy and a drop down to the right of the field is viewed in Chrome, and the other where the field is just blank is in Safari.

I’ll put the website details in a secure link as I need to give you the By Pass Password as the site isn’t live at the minute.

Thanks!

[rad]

Hi @core365,

Thanks for reaching out.

Please check this https://stackoverflow.com/questions/46788516/input-date-dont-work-on-safari, the type="date" is not supported by some browser like Safari. It would need further libraries for it to work like a jQuery’s date picker. https://jqueryui.com/datepicker/

I recommend contacting the plugin author for date picker integratin related.

Thanks!

[core365]

Hi @Rad,

Thanks for letting me know. I’ll get in contact with the author like you suggested and see if they can help with it.

Thanks again!

[core365]

Hi, 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 on the contact form 7 forum worked for me:

Add this script into your Theme Functions file functions.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!

It worked for me, so I hope it might help someone else out too!

[christian]

Hey @core365,

We’re glad that you found a solution to the Contact Form 7 issue and also thanks for sharing.