格式输入框的HTML5模式采取日期mm/dd/yyyy？

Question

我使用jQuery datepicker,我想用HTML5模式限制我的输入字段,如果用户不是从jQ​​uery datepicker获取日期,而是键入日期.

如何使用HTML5模式限制用户,以便他们只需在表单中键入日期mm/dd/yyyy？

Answer 1

最简单的方法是使用只读属性来阻止用户直接输入:

 <input class="datepicker" type="text" name="date" value="" readonly />

或者您可以使用基于模式属性的HTML5验证.日期输入模式(dd/mm/yyyy或mm/dd/yyyy):

<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}" class="datepicker" name="date" value="" />

Answer 2

我使用这个网站,这个模式也做闰年验证.

<input type="text" 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))" required />

Answer 3

我已将http://html5pattern.com/Dates完整日期验证 (YYYY-MM-DD) 转换为DD/MM/YYYY巴西格式：

pattern='(?:((?:0[1-9]|1[0-9]|2[0-9])\/(?:0[1-9]|1[0-2])|(?:30)\/(?!02)(?:0[1-9]|1[0-2])|31\/(?:0[13578]|1[02]))\/(?:19|20)[0-9]{2})'

Answer 4

下面的模式在闰年和正常日期的情况下完美适用。日期格式为：YYYY-MM-DD

<input type="text"  placeholder="YYYY-MM-DD" pattern="(?:19|20)(?:(?:[13579][26]|[02468][048])-(?:(?: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))|(?:[0-9]{2}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:29|30))|(?:(?:0[13578]|1[02])-31)))" class="form-control "  name="eventDate" id="" required autofocus autocomplete="nope">

我从http://html5pattern.com/Dates得到了这个解决方案。希望它可以帮助某人。