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

联系表单7使用HTML5，某些浏览器不支持Datepicker等功能。以下答案来自FAQ页面http://contactform7.com/faq/

Contact Form 7是否支持HTML5输入类型？

是。联系表格7 3.4和更高的支持表格标签对应   这些HTML5输入类型：电子邮件，电话，网址，号码，范围和日期。

如果您不想使用HTML5输入类型，可以通过以下方式禁用它   将以下代码添加到主题的functions.php文件中：1

add_filter（'wpcf7_support_html5'，'__ return_false'）;

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

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

默认情况下，此回退功能已禁用，因为它会加载额外功能   JavaScript和CSS（性能不佳）并且它只是   使用日期或数字输入字段的网站所必需的。   如果您使用日期或数字输入字段并希望使用此jQuery   基于UI的后备功能，将以下代码添加到您的主题中   functions.php文件并激活该功能：1

add_filter（'wpcf7_support_html5_fallback'，'__ return_true'）;

所以在你的情况下添加 add_filter（'wpcf7_support_html5_fallback'，'__ return_true'）; 如果你安装了jquery UI，你可以在这里找到它：https://jqueryui.com/

cf7的datepicker无法在firefox

2 个答案: