联系表 7 - 将占位符添加到日期字段答案

【问题标题】：Contact Form 7 - Adding placeholder to Date Field联系表 7 - 将占位符添加到日期字段
【发布时间】：2021-03-09 16:27:13
【问题描述】：

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

我需要在两个字段中使用占位符来指示每个字段中需要哪些信息。

我已遵循官方建议 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">

【问题讨论】：

参考contactform7.com/date-field。它解释了如何在date field 中添加占位符。
@user2584538 对不起，如果我完全错过了它，但我认为该页面只是指我上面链接的页面，它不适合我？
那个参考有完整的代码[date* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"]
@user2584538 再次，也许我误解了 - 但这似乎并没有创建占位符。如果我复制并粘贴该确切代码，它只会对可以选择的日期设置限制。
"2013-04-01" 这是上面sn-p的占位符文本。忽略你不想要的东西，比如min 和/或max。

标签： wordpress contact-form-7

【解决方案1】：

添加这个：

<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">

【讨论】：

谢谢，我该如何将它添加到短代码中？
通过Contact form 7界面编辑表单时，只需将生成的[date ...]标签直接替换为该html即可。
这在ios设备上不起作用请给我任何解决方案
知道如何更改显示格式吗？

【解决方案2】：

您可以使用这个 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

【讨论】：

【解决方案3】：

“Dino”（2019 年 2 月 12 日）的答案很好用。您需要将 name="INSERTMAILDATENAME" 更改为您的日期选择器名称。在我的例子中，该字段被替换为 name="your-date"。进行该修改后，它工作得很好。 : o)

【讨论】：

【解决方案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">

离开输入时失败，即 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

【讨论】：