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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17080963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:23:09  来源:igfitidea点击:

HTML5 pattern for formatting input box to take date mm/dd/yyyy?

htmldatehtml-input

提问by MJVM

I used jQuery datepicker and I want to restrict my input field with a HTML5 pattern if a user, instead of getting the date from jQuery datepicker, types the date.

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

How can I restrict my users with a HTML5 pattern so that they can just type the date in the form mm/dd/yyyy?

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

回答by Stanislav Terletskyi

Easiest way is use read only attribute to prevent direct user input:

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

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

Or you could use HTML5 validation based on pattern attribute. Date input pattern (dd/mm/yyyy or mm/dd/yyyy):

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

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

回答by Chan Chun Weng

I use this websiteand this pattern do leap year validation as well.

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

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

回答by Ramesh KC

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

模式="[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}"

This is pattern to enter the date for textbox in HTML5.
The first one[0-9]{1,2} will take only decimal number minimum 1 and maximum 2.
And other similarly.

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

回答by user7347514

Try to use:

尝试使用:

pattern="(0?[1-9]|[12][0-9]|3[01])/(0?[1-9]|1[012])/\d{4}"

回答by S Debasish Nayak

Below pattern perfectly works in case of leap year and as well as with normal dates. The date format is : YYYY-MM-DD

下面的模式在闰年和正常日期的情况下完美适用。日期格式为: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">

I got this solution from http://html5pattern.com/Dates. Hope it may help someone.

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