web-dev-qa-db-ja.com

入力ボックスを日付mm / dd / yyyyにフォーマットするためのHTML5パターン？

JQuery datepickerを使用し、jQuery datepickerから日付を取得する代わりに、ユーザーが日付を入力する場合、入力フィールドをHTML5パターンで制限します。

HTML5パターンでユーザーを制限して、mm/dd/yyyy？

html5datehtml-input
20
Mehdi Jalal

最も簡単な方法は、読み取り専用属性を使用して直接的なユーザー入力を防ぐことです。

 <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="" />
53
Stanislav Terletskyi

これは 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 />
17
Chan Chun Weng

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

これは、HTML5でテキストボックスの日付を入力するパターンです。
最初の[0-9] {1,2}は、最小1と最大2の10進数のみを取ります。
その他同様に。

1
Ramesh KC

使用してみてください：

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

以下のパターンは、うるう年の場合と通常の日付の場合に完全に機能します。日付形式は次のとおりです：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 からこのソリューションを得ました。それが誰かを助けることを願っています。

0
S Debasish Nayak