联系表格7-在“日期”字段中添加占位符

Question

我在网站上有两个字段，可让用户选择取车日期并归还租车。

我在两个字段中都需要一个占位符，以指示每个字段中需要什么信息。

我已按照以下官方建议 here 进行操作：

[date* FromDate placeholder "Start Date"]

[date* ToDate placeholder "Return Date"]

但是，结果只是空白日期。

占位符也出现在输出的HTML代码中

<input type="date" name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

Answer 1

“恐龙”（19年2月12日）的答案很好。您需要将名称=“ INSERTMAILDATENAME”更改为日期选择器名称。在我的实例中，该字段被替换为name =“ your-date”。进行修改后，它可以正常工作。 ：o）

Answer 2

这只是一个更新。

使用此：

<input type="text" onfocus="(this.type='date')" onblur="(this.type='text')"  name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

在保留输入即onblur时失败

对我有用的代码是：

<input type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">

我相信onfocusout属性是唯一的解决方案，因为它具有起泡属性。

阅读：onfocus vs onfocusin & onblur vs onfocusout

Answer 3

您可以使用这个 WordPress 插件：https://wordpress.org/plugins/date-time-picker-for-contact-form-7/

安装并激活插件后，只需添加文本字段并添加适当的类：

[text EventDate class:walcf7-datepicker placeholder"Event date"]

课程：
仅适用于日期选择器：walcf7-datepicker
仅适用于时间选择器：walcf7-timepicker
对于日期和时间选择器：walcf7-datetimepicker

Answer 4

添加此内容：

<input type="text" onfocus="(this.type='date')" onblur="(this.type='text')"  name="FromDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-required wpcf7-validates-as-date" aria-required="true" aria-invalid="false" placeholder="Start Date">