如何验证 HTML5 日期格式答案

【问题标题】：How to validate HTML5 date format如何验证 HTML5 日期格式
【发布时间】：2016-05-11 04:03:49
【问题描述】：

我想使用 HTML5 日期输入字段

<input type='date' name='customDate'>

以便其他用户可以从他们的浏览器中使用内置的日期选择器。

我想检查输入是否实际上是日期格式。正如我在这里找到的：Is there any way to change input type="date" format? 没有独特的演示格式。例如，在 Chrome 中，日期字段的输入以 dd.mm.yyyy 的形式给出，而在 Firefox 24 或 IE 9/10 中，输入字段中的日期显示为 YYYY-MM-DD.

我的第一个问题是，您如何告诉用户您希望他以哪种格式输入日期？在 Firefox 中，我需要类似的东西

<label>Enter Date(YYYY-MM-DD)</label><input type='date' 
                                         name='customDate' placeholder='YYYY-MM-DD'>

但这对 Chrome 来说是错误的。

其次，如何在提交之前检查当前输入是否采用（浏览器的）有效日期格式？我知道如果日期格式为 YYYY-MM-DD，我可以在提交后使用 PHP 进行检查，但是在提交之前如何使用 JavaScript 进行检查？

【问题讨论】：

标签： javascript php jquery html date

【解决方案1】：

只需使用 onfocus 和 onblur 动态更改日期类型，并如下所示进行验证。

<input type="text" id="startDate" onfocus="(this.type='date')" onblur="{this.type='text'}" name="startDate" placeholder="Start Date(yyyy-mm-dd)"/>

$("#startDate").val()=""

最后你的日期值将是 yyyy-mm-dd

【讨论】：

【解决方案2】：

我认为验证 HTML5 日期格式的最佳方法是将工作留给日期选择器（如果有可用的话）。

例如，chrome 或 ios5 的原生日期选择器不允许用户输入错误的日期。在 chrome 中，它甚至会检查日期是否存在于人类日历中。

如果浏览器没有本机日期选择器（如 firefox），则应使用 Modernizer 检测到这一点，并且应使用 jQuery UI datepicker。 Here 是一篇很好的文章，它解释了如何做到这一点。不幸的是，jQuery datepicker 不检查输入是否有效。但是，可以设置 dateType 和 constrainInput，但它们不检查日期是否真的存在，只是语法是否正确。请注意，jquery 验证插件具有带有日期属性的troubles。

【讨论】：

【解决方案3】：

像这样使用它：

<label>Enter Date(YYYY-MM-DD)</label>
<input type='date' name='customDate' placeholder='YYYY-MM-DD' pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" >

对于所有其他 HTML5 日期模式，请访问：

http://html5pattern.com/Dates

【讨论】：

如果要添加预设值，使用value="YYYY-MM-DD"格式即可。
遗憾的是，这不会每次都有效，不适用于 type="date"，它适用于 type="text" tho

【解决方案4】：

最好的方法是使用日历/日期选择器（即：jquery-ui）。

你可以指定你想要的格式，也很人性化。

jquery-ui details and examples for datepicker

【讨论】：