Date and time <input> types
<input> 要素の type="date" は、ユーザーが日付を入力できる入力フィールドを作成します。 日付選択入力 UI の表示は、ブラウザーやオペレーティングシステムによって異なります。 値は yyyy-mm-dd 形式に正規化されます。
結果の値には年、月、日が含まれますが、時刻は含まれません。 time および datetime-local 入力型は時刻や日付と時刻の入力に対応しています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 57 | 5 | 18 | 4 | |
| HTML 属性 | ||||||
| input 要素の type="date" は、ユーザーが日付を入力できる入力フィールドを作成します。 日付選択入力 UI の表示は、ブラウザーやオペレーティングシステムによって異なります。 値は yyyy-mm-dd 形式に正規化されます。 | 20 | 12 | 57 | 14.1 | 25 | 5 |
| input 要素の datetime-local 型は、ユーザーが簡単に日付と時刻、つまり年、月、日と時、分を入力することができる入力コントロールを生成します。ユーザーのローカルタイムゾーンが使用されます。 | 20 | 12 | 93 | 14.1 | 25 | 5 |
| input 要素の month 型は、ユーザーが年と月を入力できるようにする入力フィールドを作成し、年と月を簡単に入力できるようにします。 値は YYYY-MM の形式の文字列で、YYYY は 4 桁の年、 MM は月の番号です。 | 20 | 12 | | | 25 | ≤11.3 |
| input 要素の time 型は、ユーザーが簡単に時刻 (時と分、任意で秒) を入力できるように設計された入力欄を生成します。 | 20 | 12 | 57 | 14.1 | 25 | 5 |
| input 要素の week 型は、年と、その年の ISO 8601 週番号 (つまり、第 1 週から第 52 または 53 週) を簡単に入力することができる入力欄を生成します。 | 20 | 12 | | | 25 | 18.2 |
注釈 1件
削除済み
- このバージョンで機能が削除されました (24)
注釈 1件
実装メモ
- 時刻ピッカーを使わずに日付ピッカーだけを表示するようにした（バグ 1726107およびバグ 1726108を参照）。
注釈 1件
実装メモ
- サファリは日付ピッカーだけを表示し、時間ピッカーを表示しない。
注釈 1件
実装メモ
- 入力タイプは認識されるが、月ごとの制御はできない。バグ200416を参照のこと。
基本構文
HTML
<label>Date: <input type="date" name="date"></label>
<label>Date: <input type="time" name="time"></label>
<label>Date and time: <input type="datetime-local" name="datetime"></label>
<label>Month: <input type="month" name="month"></label>ライブデモ
実務での使いどころ
-
Date and time <input> types の活用
<input> 要素の type="date" は、ユーザーが日付を入力できる入力フィールドを作成します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。