このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<input type="date">
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年4月.
<input> 要素のtype="date" は、ユーザーが日付を入力できる入力フィールドを作成します。 日付選択入力 UI の表示は、ブラウザーやオペレーティングシステムによって異なります。 値はyyyy-mm-dd 形式に正規化されます。
結果の値には年、月、日が含まれますが、時刻は含まれません。time およびdatetime-local 入力型は時刻や日付と時刻の入力に対応しています。
試してみましょう
<label for="start">Start date:</label><input type="date" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />label { display: block; font: 1rem "Fira Sans", sans-serif;}input,label { margin: 0.4rem 0;}値
入力欄に入力された日付を表す文字列です。日付は日付文字列形式に従って書式化されます。
次のように、日付の入力欄の既定値をvalue 属性に設定することができます。
<input type="date" value="2017-06-01" />メモ:表示される日付の書式は実際のvalue とは異なります。 — 表示される日付はユーザーのブラウザーに設定されたロケールに基づいた書式になりますが、解釈されるvalue は常にyyyy-mm-dd の書式です。
JavaScript での日付値を取得したり設定したりするには、次のようにHTMLInputElement のvalue およびvalueAsNumber プロパティで行うことができます。
const dateControl = document.querySelector('input[type="date"]');dateControl.value = "2017-06-01";console.log(dateControl.value); // "2017-06-01" と表示console.log(dateControl.valueAsNumber); // 1496275200000 と JavaScript タイムスタンプを表示このコードは<input> 要素のうちtype がdate である最初のものを探し、値を2017-06-01 （2017 年 6 月 1 日）に設定します。それからその値を文字列と数字の書式で読み直しています。
追加の属性
すべての<input> 要素に共通する属性はdate 入力型にも適用されますが、その表示に影響を与えないかもしれません。例えば、size やplaceholder は動作しないかもしれません。date 入力には以下の追加属性があります。
max
受け付ける最も遅い日付です。要素に入力されたvalue がこれ以降になった場合、要素は制約検証に失敗します。max 属性の値がyyyy-mm-dd の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。
max とmin の両方の属性を設定する場合、この値はmin 属性にあるものより遅いか、同じ日付文字列でなければなりません。
min
受け付ける最も早い日付です。要素に入力されたvalue がこれ以前になった場合、要素は制約検証に失敗します。min 属性の値がyyyy-mm-dd の書式のありうる日付でない場合、要素は最小の日付値を持ちません。
max とmin の両方の属性を設定する場合、この値はmax 属性で指定されたものより早いか、同じ日付である必要があります。
step
step 属性は値が準拠する粒度を指定する数値、または後述する特殊な値any です。刻みの基準値（指定されていればmin、そうでなければvalue、どちらも提供されていなければ適切な既定値）に等しい値のみが有効となります。
文字列値のany は刻みがないことを意味し、（min やmax のようなほかの制約を除けば）どの値でも許可されます。
メモ:ユーザーによって入力されたデータが step 設定に従っていない場合、ユーザーエージェントは最も近い有効な値に丸める可能性があり、同じ距離の値が 2 つあった場合は、正の方向の値を優先します。
date 入力欄では、step の値は日単位で指定します。また、 86,400,000 にstep を乗じた値に等しいミリ秒数として扱われます（数値はミリ秒単位であるため）。step の既定値は1 であり、 1 日を表します。
メモ:any をstep 属性の値として指定すると、1 をdate 入力欄に設定したのと同じ効果になります。
date 入力欄の使用
日付入力は日付を選ぶための簡単なインターフェイスを提供し、ユーザーのロケールに関係なくサーバーに送信されるデータ形式を正規化します。
この節では、<input type="date"> の基本的な使用方法から、より複雑な使用方法まで見ていきます。
日付入力の基本的な使用
もっとも基本的な<input type="date"> の使用方法は、次のように基本的な<input> と<label> 要素の組み合わせです。
<form action="https://example.com"> <label> 誕生日を入力してください。 <input type="date" name="bday" /> </label> <p><button>Submit</button></p></form>この HTML は入力された日付をbday キーに入れてhttps://example.com に送ります。 — 結果の URL はhttps://example.com/?bday=1955-06-08 のようになります。
日付の最大値と最小値の設定
min およびmax 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を2017-04-01 に、日付の最大値を2017-04-30 に設定しています。
<form> <label >希望するパーティーの日を選んでください。 <input type="date" name="party" min="2017-04-01" max="2017-04-30" /> </label></form>この結果は、 2017 年の 4 月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで 4 月以外にスクロールすることができなくなります。
step 属性を使用すると、日付が加算するたびに飛ばす日数を設定できます（例えば、土曜日のみを選択できるようにしたい場合など）。
入力欄の寸法の制御
<input type="date"> はsize のような寸法に関する属性には対応していません。寸法を変更するにはCSS を推奨します。
検証
既定で、<input type="date"> は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。
min およびmax を使用して有効な日付を制限すると（日付の最大値と最小値の設定を参照）、このフォームコントロールでは不正な日付を無効化し、範囲を外れた日付を送信しようとしたときにエラーを表示するでしょう。
required 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。
日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。
<form> <label> 推奨したいパーティーの日を選択してください (必須、4 月 1 日～ 20 日): <input type="date" name="party" min="2017-04-01" max="2017-04-20" required /> <span></span> </label> <p> <button>送信</button> </p></form>不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。
上記の例で使用されている CSS です。:valid および:invalid擬似要素を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の<span> に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。
label { display: flex; align-items: center;}span::after { padding-left: 5px;}input:invalid + span::after { content: "✖";}input:valid + span::after { content: "✓";}警告:クライアント側のフォーム検証は、サーバー上の検証の代用にはなりません。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。
例
この例では、ネイティブの<input type="date"> ピッカーを使用して日付ピッカーを作成します。
HTML
HTML は次のようになります。
<form> <div> <label for="bday">誕生日を入力してください。</label> <input type="date" name="bday" /> <span></span> </div></form>CSS
CSS は次のようになります。
input:invalid + span::after { content: " ✖";}input:valid + span::after { content: " ✓";}結果
技術的概要
| 値 | 文字列で、 YYYY-MM-DD 形式の日付、または空欄を表します |
| イベント | change およびinput |
| 対応している共通属性 | autocomplete,list,readonly,step |
| IDL 属性 | value,valueAsDate,valueAsNumber |
| DOM インターフェイス | HTMLInputElement |
| メソッド | select(),stepDown(),stepUp() |
| 暗黙の ARIA ロール | 対応するロールなし |
仕様書
| Specification |
|---|
| HTML # date-state-(type=date) |
ブラウザーの互換性
関連情報
- 全般的な
<input>およびその操作に使用するHTMLInputElementインターフェイス - 日付と時刻の選択のチュートリアル
- HTML で使われる日付や時刻の形式