<input type="date">
<input>
要素の type="date"
は、ユーザーが日付を入力できる入力フィールドを作成します。 日付選択入力 UI の表示は、ブラウザーやオペレーティングシステムによって異なります。 値は yyyy-mm-dd
形式に正規化されます。
結果の値には年、月、日が含まれますが、時刻は含まれません。 time および datetime-local 入力型は時刻や日付と時刻の入力に対応しています。
試してみましょう
値
入力欄に入力された日付を表す文字列です。日付は日付文字列形式に従って書式化されます。
次のように、日付の入力欄の既定値を 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
min
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">
は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。
min
および max
を使用して有効な日付を制限すると(日付の最大値と最小値の設定を参照)、このフォームコントロールでは不正な日付を無効化し、範囲を外れた日付を送信しようとしたときにエラーを表示するでしょう。
required
属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。
日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。
<form>
<label>
推奨したいパーティーの日を選択してください (必須、4 月 1 日~ 20 日):
<input
type="date"
name="party"
min="2017-04-01"
max="2017-04-20"
required />
<span class="validity"></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 class="nativeDatePicker">
<label for="bday">誕生日を入力してください。</label>
<input type="date" id="bday" name="bday" />
<span class="validity"></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 Standard # date-state-(type=date) |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 全般的な
<input>
およびその操作に使用するHTMLInputElement
インターフェイス - 日付と時刻の選択のチュートリアル
- HTML で使われる日付や時刻の形式
- CSS プロパティの互換性