フォームの時刻欄を 30 分おきに設定したいと思ったこと、ありませんか?

今回は、フォームの時刻欄を特定の時間おきにする方法を紹介します。

以前、日付や時刻をカレンダーやドロップダウンで選択する方法を紹介しました。

基本のコードは、以下になります。

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

image2

時刻を一定の時間おきにするのは、inputタグにstepを使用します。

step="2"は 2 秒単位で時間が変わる設定になります。

stepの値は、1 分にしたい場合は 60(1 分は 60 秒)、1 時間にしたい場合は 3600(1 時間は 3600 秒)を設定します。

今回は、30 分にしたいのでstep="1800"を設定します。

<input type="time" name="予定の時刻" step="1800" /><span></span>

ブラウザで確認しましょう。

時刻の分の部分をクリックして、キーボードの上矢印キーを押してみると、

時刻が 30 分おきに変更することができました。

キーボードでは 30 分おきに変更することができましたが、今のままだとドロップダウンの選択肢が反映されておりません。

image3

ドロップダウンの内容を変更するには、inputタグの list を使用します。

listの中にdata-listと書きます。

listの中身は、何を書いても問題ありません。

<label for="time">予定の時刻:</label>
<input
  type="time"
  list="data-list"
  name="予定の時刻"
  step="1800"
/><span></span>

次に、ドロップダウンにどの値を表示したらいいかを指定するために、datalistタグを使います。

その際、datalist内にidを作成し、id名を先程のlistの名前と一致させます。

<datalist id="data-list"></datalist>

datalist タグの中に、option タグで表示したい値を設定します。

<datalist id="data-list">
  <option value="06:00"></option>
  <option value="06:30"></option>
  <option value="07:00"></option>
</datalist>

ブラウザで確認すると、

image4

指定した時刻のドロップダウンができました。

inputタグの中に、minmaxを設定すると、使い勝手がよくなります。

<label for="time">予定の時刻:</label>
<input
  type="time"
  list="data-list"
  name="予定の時刻"
  min="06:00"
  max="07:00"
  step="1800"
/><span></span>
<datalist id="data-list">
  <option value="06:00"></option>
  <option value="06:30"></option>
  <option value="07:00"></option>
</datalist>

特定の時刻を設定したい場合、ぜひ使ってみてください。

ブログ一覧