<input>要素の"datetime-local"型

<input>要素の”datetime-local”型

フォーム内で日付と時刻をまとめて指定するための入力欄を設ける際に使用されます。(年月日、時分まで。秒には対応していない)
datetime-local型 はブラウザによって見た目が大きく変わる要素の一つで、対応していないブラウザの場合は、単なる text型 として扱われます。主要なブラウザでは、Internet Exploler、Firefox、Mac版のSafariが対応していません。
なお、名前に”local”とついているのは、「ユーザーのローカルタイムゾーンを使う」という意味です。

属性

<input> 要素の datetime-local型 では、以下の属性が使用できます。

value

日時を表すテキストで、入力欄の初期値を設定します。

表示される日付と時刻の書式は実際の value とは異なる点に注意が必要です。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーのロケールによって書式化されますが、日付や時刻の value は常に yyyy-MM-ddThh:mm の書式です。
例えば、画面上に「2019/09/16 21:30」と表示されていても、サーバーに送信される値は、 「2017-06-01T08:30」 のようになります。

autocomplete

自動補完機能を提供するかどうかを記述します。

list

その入力欄が関連付けられた、定義済みデータを提供する、<datalist> 要素の id を指定します。

readonly

この属性を指定した場合、値が変更できなくなります。

max

入力できる、最も新しい日時を指定します。

min

入力できる、最も古い日時を指定します。

step

上下の矢印で値を調整する時や、検証に使用する刻み値を指定します。datetime-local型の場合、「秒」単位の値を指定します。デフォルトは”60″(=1分)です。

サンプル

See the Pen rNBrgjb by Masahiko Iwakiri (@m-iwakiri) on CodePen.


 

このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs: https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?: https://caniuse.com/#home

コメント

タイトルとURLをコピーしました