Question

我想使用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检查它？

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 details and examples for datepicker

Answer 4

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

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

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

如何验证HTML5日期格式

4 个答案: