我使用了 jQuery datepicker，如果用户键入日期而不是从 jQuery datepicker 获取日期，我想用 HTML5 模式限制我的输入字段。
如何使用 HTML5 模式限制我的用户，以便他们可以在表单中输入日期mm/dd/yyyy？
问问题
169487 次
7 回答
66
最简单的方法是使用只读属性来防止直接用户输入：
<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="" />
于 2013-06-13T07:02:36.363 回答
22
我使用这个网站，这个模式也做闰年验证。
<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 />
于 2014-11-22T01:30:23.877 回答
5
下面的模式在闰年和正常日期的情况下完美地工作。日期格式为：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得到了这个解决方案。希望它可以帮助某人。
于 2019-03-20T12:36:23.740 回答
4
我已将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})'
于 2020-06-17T19:20:45.560 回答
1
模式="[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}"
这是在 HTML5 中为文本框输入日期的模式。
第一个 [0-9]{1,2} 将仅采用十进制数，最小 1 和最大 2。
其他类似。
于 2017-11-25T06:16:02.640 回答
1
尝试使用：
pattern="(0?[1-9]|[12][0-9]|3[01])/(0?[1-9]|1[012])/\d{4}"
于 2017-12-01T01:47:33.627 回答
0
此正则表达式执行 1900-2099 年的标准 ISO 8601YYYY-MM-DD格式，并考虑闰年。
<input type="text" pattern="(?:19|20)(?:[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))|(?:[13579][26]|[02468][048])-02-29)" required />
所有其他示例似乎在验证闰年时都存在一些问题，要么不允许日期为 2 月 29 日，要么允许此日期在非闰年的年份中。
于 2021-05-02T13:38:22.740 回答