【HTML】カレンダー形式のフォーム入力(type=”datetime-local”)

inputフォームにtype="datetime-local"を設定すると
カレンダー形式で日時を入力出来るようになります。

<input type="datetime-local">

最小値min="YYYY-MM-DDThh:mm:ss"
最大値max="YYYY-MM-DDThh:mm:ss"など指定できる属性もあるので

最小値の指定は過去を選択できないように出来たり、
最大値は来月以降や来年以降など誤って遠い将来の指定してしまう入力ミス防止の為などの指定も出来ます。

2023.01現在だとiOSでも問題なく使える(Mac環境のChrome可・Safari不可)ので、状況を選べば複雑なJSのフレームワークなど使用しなくてもカレンダー形式の入力を実現でき、入力方法を便利にすることが出来ます。

年月日時分まで全て含むtype="datetime-local"以外にも

  • 年月日だけのtype="date"
  • 年月だけのtype="month"
  • 時分だけのtype="time"
  • 年週だけのtype="week"

などもあります。

参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local
https://www.tagindex.com/html/form/input_datetime_local.html
https://codeforfun.jp/reference-html-tag-input-type-datetime-local/

関連記事

コメントを残す

*