cf7的datepicker无法在firefox中运行

Question

我是一个名为联系表格7的插件,用于联系我们页面.我有日期选择器.它不是在Firefox中工作,而是在chrome中工作.我该如何解决这个错误？任何人都可以解决这个问题吗？

Answer 1

@Christophvh的答案是对的,但不完整.datepicker日历在这里但不可见.接缝是jquery datepicker中的一个错误,它设置了一个不正确的z-index值,从而使日历隐藏在表单后面.

这是我如何使它工作:

1)启用WCF7后备,但将此代码段放在主题functions.php文件中

add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

2)通过将此代码段放在主题functions.php文件中,或者通过编辑主题CSS来修复错误,如果您知道如何:

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 为此使用 HTML5，某些浏览器不支持 Datepicker 等功能。以下答案来自常见问题解答页面http://contactform7.com/faq/

\n\n

\n

联系表单 7 支持 HTML5 输入类型吗？

\n\n

是的。Contact Form 7 3.4 及更高版本支持与以下 HTML5 输入类型相对应的表单标签：电子邮件、电话、网址、号码、范围和日期。

\n\n

如果您不想\xe2\x80\x99 不想使用 HTML5 输入类型，您可以通过\n 将以下代码添加到您的 theme\xe2\x80\x99sfunctions.php 文件中来禁用此功能： 1

\n\n

add_filter(\'wpcf7_support_html5\',\'__return_false\');

\n\n

请注意，即使是最新的浏览器也部分支持 HTML5。例如，最新的 Firefox 不支持日期输入类型（允许您从日历用户界面中选择日期）和数字输入类型（允许您输入来自旋转盒 UI 的数字值）但 \xe2\x80\x94，因此 Firefox 提供了一个通用文本输入字段作为后备，而不是日历和旋转盒 UI。这可能会让用户感到困惑，因为他们无法检测到该字段需要什么类型的输入值。因此，您可能会觉得最好等待所有浏览器完全支持所有 HTML5 功能。

\n\n

但您不需要\xe2\x80\x99 等待！联系表单 7 提供了更好的解决方案。\n 联系表单 7 能够为\n 日期和数字输入字段提供基于 jQuery UI 的回退。通过使用此解决方案，您可以分别为日期字段提供日历 UI 并为数字字段提供旋转框 UI，甚至可以使用 Firefox 或 Internet Explorer。

\n\n

默认情况下，此后备功能处于禁用状态，因为它会加载额外\n JavaScript 和 CSS（导致性能较差），并且仅\n 对于使用日期或数字输入字段的网站来说是必需的。\n 如果您使用日期或数字，\n数字输入字段并希望使用此基于 jQuery\n UI 的回退功能，请将以下代码添加到您的 theme\xe2\x80\x99s\n Functions.php 文件中并激活该功能： 1

\n\n

add_filter(\'wpcf7_support_html5_fallback\',\'__return_true\');

\n

\n\n

因此，在您的情况下添加 \nadd_filter( \'wpcf7_support_html5_fallback\', \'__return_true\' ); \n如果你安装 jquery UI 就可以工作，你可以在这里找到它：https://jqueryui.com/

\n