トップページ  > HTML Living Standard  > <input>  > type=date

★HTML Living Standard リファレンス

<input type=date> …… 日付の入力欄を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<input type=date>は、日付の入力欄を表す際に使用します。

input要素のtype属性の値に date を指定すると、 要素の値は特定の日付を表します。

<input type=date>で入力が想定されているのは、現代の暦に基づいて正確な日付と時刻を確立できる値です。 例えば、「ビッグバンから1ミリ秒後」「ジュラ紀の初期」「紀元前250年頃の冬」 などの時間を入力するのは不適切です。 これらはテキストとして入力してもらう方法が適しているでしょう。

また、グレゴリオ暦導入前の日付の入力にも適しません。 グレゴリオ暦の導入時期は国によってまちまちであり、 それ以前の日付を例外なく正確に現代の暦に変換することは簡単ではありません。 グレゴリオ暦導入前の日付をユーザーに入力してもらうには、 select要素を使用した数値入力などの方法が適しているでしょう。

■属性

name属性
フォーム部品に名前をつけます。
value属性
入力される値を指定します。 input type=dateの場合、value属の値が空でないなら有効な日付の文字列である必要があります。
min属性
最小値を指定します。 input type=dateの場合、min属性の値は有効な日付の文字列である必要があります。
max属性
最大値を指定します。 input type=dateの場合、max属性の値は有効な日付の文字列である必要があります。
step属性
変動幅を指定します。 input type=dateの場合、step属性の値は日数で表され、デフォルトのステップ値は1日です。

■使用例

以下のサンプルでは、入力値を1980年代より前の日付に制限しています。

HTMLソース

<input name=bday type=date max="1979-12-31">
↓↓↓

ブラウザ上の表示

■使用例

以下のサンプルでは、input要素のtype=dateを使用して 年/月/日の入力欄を作成しています。

HTMLソース

<form>
 <fieldset>
  <legend>日付範囲</legend>
  <div>
   <label for=start>自</label>
   <input type=date id=start>
  </div>
  <div>
   <label for=end>至</label>
   <input type=date id=end>
  </div>
  <div>
   <button>適用</button>
  </div>
 </fieldset>
</form>
↓↓↓

ブラウザ上の表示

日付範囲

input要素の終了タグについて

HTMLの仕様では、input要素には終了タグ</input>はありません。

■関連項目

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ