blocks|key|81736|text|最简单的方法是使用只读属性来防止用户直接输入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|81737|+<input+class="datepicker"+type="text"+name="date"+value=""+readonly+/>|code-block|syntax|javascript|81738|或者，您可以使用基于模式属性的HTML5验证。日期输入模式(dd/mm/yyyy或mm/dd/yyyy)：|81739|<input+type="text"+pattern="\d{1,2}/\d{1,2}/\d{4}"+class="datepicker"+name="date"+value=""+/>|81740|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Easiest way is use read only attribute to prevent direct user input:</p>

<pre><code> &lt;input class="datepicker" type="text" name="date" value="" readonly /&gt;
</code></pre>

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

<pre><code>&lt;input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}" class="datepicker" name="date" value="" /&gt;
</code></pre>


blocks|key|299054|text|我使用这个website，这个模式也做了闰年验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|299055|<input+type="text"+pattern="(?:19%7C20)[0-9]{2}-(?:(?:0[1-9]%7C1[0-2])-(?:0[1-9]%7C1[0-9]%7C2[0-9])%7C(?:(?!02)(?:0[1-9]%7C1[0-2])-(?:30))%7C(?:(?:0[13578]%7C1[02])-31))"+required+/>|code-block|syntax|javascript|299056|entityMap|0|LINK|mutability|MUTABLE|url|http://html5pattern.com/Dates^0|5|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I use this <a href="http://html5pattern.com/Dates">website</a> and this pattern do leap year validation as well.</p>

<pre><code>&lt;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 /&gt;
</code></pre>


blocks|key|81775|text|尝试使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|81776|pattern="(0?[1-9]%7C[12][0-9]%7C3[01])/(0?[1-9]%7C1[012])/\d{4}"|code-block|syntax|javascript|81777|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try to use:</p>

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


blocks|key|81812|text|下面的模式在闰年和正常日期的情况下都很好用。日期格式为:+YYYY-MM-DD|type|unstyled|depth|inlineStyleRanges|entityRanges|data|81813|<input+type="text"++placeholder="YYYY-MM-DD"+pattern="(?:19%7C20)(?:(?:[13579][26]%7C[02468][048])-(?:(?:0[1-9]%7C1[0-2])-(?:0[1-9]%7C1[0-9]%7C2[0-9])%7C(?:(?!02)(?:0[1-9]%7C1[0-2])-(?:30))%7C(?:(?:0[13578]%7C1[02])-31))%7C(?:[0-9]{2}-(?:0[1-9]%7C1[0-2])-(?:0[1-9]%7C1[0-9]%7C2[0-8])%7C(?:(?!02)(?:0[1-9]%7C1[0-2])-(?:29%7C30))%7C(?:(?:0[13578]%7C1[02])-31)))"+class="form-control+"++name="eventDate"+id=""+required+autofocus+autocomplete="nope">|code-block|syntax|javascript|81814|我从http://html5pattern.com/Dates那里得到了这个解决方案。希望这能帮助到一些人。|offset|length|81815|entityMap|0|LINK|mutability|MUTABLE|url|http://html5pattern.com/Dates^0|0|0|2|T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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

<pre><code>&lt;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"&gt;
</code></pre>

<p>I got this solution from <a href="http://html5pattern.com/Dates" rel="noreferrer">http://html5pattern.com/Dates</a>.
Hope it may help someone.</p>


blocks|key|299158|text|此正则表达式执行1900-2099年的标准ISO8601+YYYY-MM-DD格式，并考虑了闰年。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|299159|<input+type="text"+pattern="(?:19%7C20)(?:[0-9]{2}-(?:(?:0[1-9]%7C1[0-2])-(?:0[1-9]%7C1[0-9]%7C2[0-8])%7C(?:(?!02)(?:0[1-9]%7C1[0-2])-(?:29%7C30))%7C(?:(?:0[13578]%7C1[02])-31))%7C(?:[13579][26]%7C[02468][048])-02-29)"+required+/>|code-block|syntax|javascript|299160|所有其他示例在验证闰年时似乎都有一些问题，要么不允许日期为2月29日，要么允许在不是闰年的年份中使用此日期。|299161|entityMap^0|T|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>This regex does the standard ISO 8601 <code>YYYY-MM-DD</code> format for the years 1900-2099, taking into account leap years.</p>
<pre><code>&lt;input type=&quot;text&quot; pattern=&quot;(?: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)&quot; required /&gt;
</code></pre>
<p>All other examples seem to have some problem validating leap years, either not allowing the date February 29, or allowing this date in years that are not leap years.</p>


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

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


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

jQuery

HTML5

我使用了jQuery日期选择器，如果用户输入日期而不是从jQuery日期选择器获取日期，我想用HTML5模式限制我的输入字段。如何使用HTML5模式限制我的用户，使他们只需在表单mm/dd/yyyy中键入日期

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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