如何验证HTML5日期格式

Question

我想使用HTML5日期输入字段

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

这样其他用户就可以使用浏览器中的内置日期选择器。

我想检查输入是否实际上是日期格式。 正如我在这里找到的： 有没有办法改变输入类型=“日期”格式？ 没有独特的演示格式。 例如，在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检查它？

Answer 1

像这样使用它：

<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

Answer 2

只需使用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

Answer 3

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

您可以指定所需的格式，也是用户友好的。

jquery-ui有关datepicker的详细信息和示例

Answer 4

我认为验证HTML5日期格式的最佳方法是将作业留给datepicker（如果有的话）。

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

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