datepicker of cf7 not working in firefox

Question

I am a plugin called contact form 7 for contact us page. I have date picker in it. It is not working in firefox but working in chrome. How can I fix this error ? Can anyone the solution for this problm ?

Answer 1

The answer from @Christophvh was right but incomplete. The datepicker calendar is here but not visible. There seams to be a bug in the jquery datepicker that sets an incorrect z-index value thus making the calendar hidden behind the form.

Here is how I made it work :

1) Enable WCF7 fallback but putting this code snippet in your theme functions.php file

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

2) Fix the bug by putting this code snippet in your theme functions.php file, or by editing you theme CSS if you know how to :

add_action('wp_head', 'replacethiswithyourthemename_wcf7_datepickerfix');
function replacethiswithyourthemename_wcf7_datepickerfix(){
    ?><style>#ui-datepicker-div {z-index:99!important;}</style><?php
}

Answer 2

Contact form 7 uses HTML5 for this, functions like Datepicker are not supported by some browsers. The following answer is from the FAQ page http://contactform7.com/faq/

Does Contact Form 7 support HTML5 input types?

Yes. Contact Form 7 3.4 and higher support form-tags corresponding to these HTML5 input types: email, tel, url, number, range and date.

If you don’t wish to use HTML5 input types, you can disable this by adding the following code into your theme’s functions.php file: 1

add_filter( 'wpcf7_support_html5', '__return_false' );

Note that even the most current browsers partially support HTML5. For example, the latest Firefox doesn’t support the date input type (that allows you to choose a date from a calendar user interface) and the number input type (that allows you to input a number value from a spinbox UI) yet — so Firefox provides a general text input field as a fallback instead of a calendar and spinbox UI. This may confuse users because they can’t detect what type of input value this field expects. So, you may feel that it is better to wait for all browsers to support all HTML5 features completely.

But you don’t need to wait! Contact Form 7 offers a better solution. Contact Form 7 is able to provide jQuery UI-based fallback for the date and number input fields. By using this solution, you can provide calendar UI for the date field and spinbox UI for the number field, respectively, even with Firefox or Internet Explorer.

By default, this fallback feature is disabled because it loads extra JavaScript and CSS (makes for poor performance) and it is only necessary for websites that use the date or the number input fields. If you use the date or number input fields and wish to use this jQuery UI-based fallback feature, add the following code into your theme’s functions.php file and activate the feature: 1

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

So in your case adding add_filter( 'wpcf7_support_html5_fallback', '__return_true' ); will work if you install jquery UI, which you can find here: https://jqueryui.com/