用于格式化输入框以获取日期 mm/dd/yyyy 的 HTML5 模式？

Posted 2023-02-25

【中文标题】用于格式化输入框以获取日期 mm/dd/yyyy 的 HTML5 模式？

【英文标题】：HTML5 pattern for formatting input box to take date mm/dd/yyyy?

【发布时间】：2013-06-09 11:28:39

【问题描述】：

我使用了 jQuery datepicker，如果用户键入日期而不是从 jQuery datepicker 获取日期，我想用 html5 模式限制我的输入字段。

如何使用 HTML5 模式限制我的用户，以便他们可以在 mm/dd/yyyy 表单中输入日期？

【参考方案1】：

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

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

或者您可以使用基于模式属性的 HTML5 验证。 日期输入模式（dd/mm/yyyy 或 mm/dd/yyyy）：

<input type="text" pattern="\d1,2/\d1,2/\d4" class="datepicker" name="date" value="" />

【讨论】：

我不知道我是否做错了什么，但你建议的正则表达式对我不起作用（至少在 Firefox、HTML 5 上）。我做了一个小的调整，现在它可以工作了：\d1,2\/\d1,2\/\d4

好吧，我可能错了。我有两个几乎相同的页面，但是对于一个您发布的模式不起作用，而对于另一个则可以。这真的让我很烦恼（我是一个真正的 HTML 初学者）

如何将渲染日期改为 yyyy/mm/day 而不是 mm/dd/yyyy？

@JenuelGanawed 你的意思是，如何使用 jQuery datepicker 更改显示的日期格式？如果是这样，这里是docs

非常混乱...我不明白pattern="\d1,2/\d1,2/\d4" 做了什么

【参考方案2】：

我使用这个website，这个模式也做闰年验证。

<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 />

【讨论】：

我可以将日期限制在过去 80 年吗？

这没有正确处理闰年。例如，它认为2021-02-29 是有效的，但由于 2021 年不是闰年，所以情况并非如此。它似乎认为每年都是闰年。

【参考方案3】：

以下模式完美适用于闰年和正常日期。 日期格式为：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 得到了这个解决方案。 希望它可以帮助某人。

【讨论】：

我来自未来。在 2021 年得到错误否定，它认为诸如 2021-04-30 之类的日期无效。

【参考方案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)'

【参考方案5】：

pattern="[0-9]1,2/[0-9]1,2/[0-9]4"

这是在 HTML5 中为文本框输入日期的模式。 第一个 [0-9]1,2 将仅采用十进制数，最小为 1，最大为 2。 其他类似。

【参考方案6】：

尝试使用：

pattern="(0?[1-9]|[12][0-9]|3[01])/(0?[1-9]|1[012])/\d4"

【参考方案7】：

此正则表达式执行 1900-2099 年的标准 ISO 8601 YYYY-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 日，要么允许在非闰年的年份中显示此日期。