シュウ

今回は【HTML】type属性dateの使い方、日付の入力欄を作成しよう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はinput type=”date”(日付)について解説しております。

今回は、input type="date"(日付)について詳しく解説していきます。
type=”date”では、「日付(カレンダー)」の入力欄を作成します。

input type="date"で作成すると、年月日の入力欄が作成されます。

注意！
IEとSafariは非対応になります。dateタイプは対応していない為、
通常のinput=textのテキスト入力欄になります。

左の図が、input type="text"になり、通常の入力欄になります。
右の図が、input type="date"になり、年月日の入力欄になります。

Chrome	Safari	Firefox	IE	Edge

type=”date”について

input type="date"を指定すると、日付(年・月・日)の入力欄(キーボード)になります。
ブラウザによっては入力しやすいインターフェイスが表示され、ユーザビリティが向上します。

送信されるデータは「YYYY-MM-DD」形式になります。

書き方は以下のようになります。

<form method="post">
	<div>
		<label for="date">日付を入力</label>
		<input type="date" name="date" />
	</div>
</form>

value属性(入力欄に初期値)について

value属性とは、入力欄に初期値の文字を指定します。
また、type属性が「submit」、「image」、「reset」、「button」の場合はボタン名として表示されます。

<form method="post">
	<div>
		<label for="date">日付を入力</label>
		<input type="date" name="date" value="2021-04-01" />
	</div>
</form>

min属性とmax属性(日付の選択範囲)について

min属性とは、日付の最小値を指定します。
例) min="2021-04-01"と指定すると、2021年4月1日から選択可能になります。

max属性とは、日付の最大値を指定します。
例) max="2021-04-01"と指定すると、2021年4月1日まで選択可能になります。

<form method="post">
	<div>
		<label for="date-min">日付を入力 min属性(最小値)</label>
		<input type="date" name="date-min" value="2021-04-01" min="2021-04-01" />
	</div>
	<div>
		<label for="date-max">日付を入力 max属性(最大値)</label>
		<input type="date" name="date-max" value="2021-04-01" max="2021-04-01" />
	</div>
</form>

min属性とmax属性と続けて指定することにより、範囲指定が可能になります。
例) min="2021-04-01"、max="2021-04-30"と指定すると、2021年04月01日から2021年04月30日までの範囲を選択できます。

<form method="post">
	<div>
		<label for="date">日付を入力 min属性とmax属性</label>
		<input type="date" name="date" value="2021-04-01" 
		min="2021-04-01" max="2021-04-30" />
	</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

step属性(選択可能な曜日を制限)について

step属性とは、指定した値おきに日付を選択できます。
例) step="5"と指定すると、5日おきに日付を選択できるようになります。

<form method="post">
	<div>
		<label for="date">日付を入力</label>
		<input type="date" name="date" value="2021-04-01" step="5" />
	</div>
</form>

required属性(必須項目)について

required属性とは、必須項目に設定します、エラー表示はブラウザによって違います。
requiredのみ記述すれば問題ありません。

<form method="post">
	<div>
		<label for="date">日付を入力</label>
		<input type="date" name="date" required />
	</div>
</form>

関連記事

まとめ

今回はこれで以上です。
次回も「フォーム」について解説していきます。

Chrome	Safari	Firefox	IE	Edge

最新記事

• 

  【HTML】download属性について、ファイルのダウンロードを学ぼう!

  2021.07.27

• 

  【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!

  2021.07.09

• 

  【HTML】kbd要素の使い方、キーボードのキーを表す要素!

  2021.07.06

• 

  【HTML】hr要素の使い方、段落の区切りを示す要素!

  2021.07.02

関連記事

< 前の記事

【HTML】type属性passwordの使い方、パスワードの入力欄を作成しよう!

次の記事 >

【HTML】type属性monthの使い方、月の入力欄を作成しよう!