date

input要素のtype属性にdateを指定すると、日付入力欄になる。

ブラウザ対応

構文

<input type="date">

日付入力欄は、YYYY-MM-DDの形式の日付を入力する入力欄。日付入力欄に対応しているブラウザであれば、日付入力用のUI（ユーザーインターフェース）が現れる。

YYYY-MM-DD

YYYYは年、MMは月、DDは日にちを意味する。

例： 2015:12:31、1990:01:01。

属性

属性 説明
autocomplete属性 オートコンプリートを有効にするかどうかを指定する属性。
autofocus属性 オートフォーカスさせる属性。
disabled属性 無効にする属性。
form属性 属するform要素のid属性値を指定する属性。
list属性 入力候補を示すdatalist要素（データリスト）のid属性値を指定する属性。
max属性 最大値を指定する属性。日付入力欄においては、max属性に指定した日付より後の日付は入力できなくなる。
min属性 最小値を指定する属性。日付入力欄においては、min属性に指定した日付より前の日付は入力できなくなる。
name属性 名前を指定する属性。
readonly属性 読み取り専用にする属性。
required属性 入力を必須にする属性。
step属性 入力可能な数値の間隔を指定する属性。日付入力欄においては、入力可能な日数の間隔となる。日付入力欄における初期設定値は1。
value属性 値を指定する属性。日付入力欄においては、初期入力値となる。

サンプルコード

日付入力欄： <input type="date" name="sampleName">

入力できる日付の範囲を指定

<input type="date" min="2014-03-15" max="2014-05-15" name="sampleName">

２０１４年３月１５日～２０１４年５月１５日までの間の日付を入力できる。

入力可能な日数の間隔を指定

<input type="date" step="7" name="sampleName">

７日間の間隔で日付を入力できる。

初期入力値を指定

<input type="date" value="2014-05-15" name="sampleName">

サンプル

シンプルな日付入力フォーム

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			日付入力欄：
			<input type="date" name="sampleName">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

特定範囲の日付入力

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			日付入力欄：
			<input type="date" name="sampleName" min="2014-03-15" max="2014-05-15">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示

水曜日の日付だけ入力できる日付入力欄

HTMLソースコード
<form action="sample-input-type.php" method="post" target="_blank">
	<p>
		<label>
			日付入力欄：
			<input type="date" name="sampleName" value="2014-01-01" step="7">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>
実際の表示