如何验证HTML5日期格式

我想使用HTML5日期输入字段如何验证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检查它？

来源

2016-02-02 Adam

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

你可以指定你想要的格式，也是userfriendly。

jquery-ui details and examples for datepicker

来源

2016-02-02 11:23:43 David

使用方法如下：

<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

来源

2016-02-02 11:25:58

如果要添加预设值时，只要使用'值= “YYYY-MM-DD”'格式。 – tusar

可悲的是，这不会每次都有效，而不是type =“date”，它适用于type =“text”tho – Srneczek

我想验证HTML5日期格式的最佳方式如果有可用的话，将工作交给日期选择器。

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

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

来源

2016-02-02 13:07:53 Adam

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

来源

2017-06-29 11:48:34

如何验证HTML5日期格式

回答

相关问题