フォームなどで日付の入力欄を作成するとき、カレンダーで選択できるようにしたい場合、ありませんか?

また、時刻の入力欄を作成するとき、ドロップダウンでも選択できるようにしたい場合、ありませんか?

今回は、JavaScript は使わずに、日付や時刻をカレンダーやドロップダウンで選択する方法を紹介します。

日付の入力欄でカレンダーを使用する

基本設定

日付の入力欄でカレンダーを使用するには、inputタグにtype="date"を設定します。

<label for="date">今日の日付:</label>
<input type="date" id="date" name="今日の日付" value="" />

ブラウザで確認すると、

image2

カレンダーのアイコンをクリックしてみます。

image3

日付の入力欄がカレンダーになりました。

初期値を設定する

初期値を設定するには、valueに値を入れます。

例えば、初期値を 2021 年 7 月 10 日にしたい場合、value="2021-07-10"と設定します。

ブラウザで確認すると、

image4

空欄だった入力欄が、2021 年 7 月 10 日と表示されました。

選択できる日付の範囲を設定する

選択できる日付の範囲を設定するには、inputタグにminmaxを設定します。

例えば、2021 年 7 月 5 日から 2021 年 7 月 24 日まで指定したい場合、min="2021-07-05"max="2021-07-24"と設定します。

ブラウザで確認すると、

image5

2021 年 7 月 4 日以前と、2021 年 7 月 5 日のテキスト色が薄くなって選択が無効になりました。

時刻の入力欄でドロップダウンを使用する

設定

時刻の入力欄でドロップダウンを使用するには、inputタグにtype="time"を設定します。

<label for="time">予定の時刻:</label>
<input type="time" id="time" name="予定の時刻" value="" />

ブラウザで確認すると、

image6

時計のアイコンをクリックしてみましょう。

image7

時刻でドロップダウンが使えるようになりました。

初期値を設定する

初期値を設定するには、valueに値を入れます。

例えば、初期値を 8 時 30 分にしたい場合、value="08:30"と設定します。

※8 の前に 0 を入れ忘れないでください。

ブラウザで確認すると、

image8

空欄だった入力欄が、8:30 と表示されました。

選択できる日付の範囲を設定する

選択できる日付の範囲を設定するには、inputタグにminmaxを設定します。

例えば、6 時から 10 時 30 分を指定したい場合、min="6:00"max="10:30"と設定します。

<input
  type="time"
  id="time"
  name="予定の時刻"
  value="08:30"
  min="06:00"
  max="10:30"
/>

また、有効か無効か確認するために、input タグの後にspanタグ、CSS に:valid:invalidプロパティを使用します。

選択した時間が、有効範囲内の場合:validプロパティが有効、有効範囲外の場合、:inValidプロパティが有効になります。

また、有効範囲内ならspanタグに『OK』、有効範囲外なら span タグに『NG』を表示するようにします。

<input
  type="time"
  id="time"
  name="予定の時刻"
  value="08:30"
  min="06:00"
  max="10:30"
/>
<span></span>
input:valid + span::after { content: "OK"; } input:invalid + span::after {
content: "NG"; }

ブラウザで確認すると、

image9

8 時 30 分は OK

image10

18 時は NG と表示されました。

フォームで日付や時刻を設定する場合は、ぜひ試してみてください。

ブログ一覧