HTML5のカレンダーピッカーについて(input type="date")
とあるシステムのフォーム部分を改修する案件があった為、内容を確認していると日付入力部分があり、該当部分をクリックするとカレンダーピッカーが表示された。何のプラグインを利用しているのかJavaScript部分を見てもそれらしい記述が無い。何だろうコレ、と思ってHTML部分を確認するとinput type="date"という、初めて見かける記述があった。以下の詳細をメモ。
サンプル
https://taitan916.info/sample/input_date/
input type="date"とは
日付選択が可能なinput要素とのこと。jQueryのプラグインやjQuery UIを用いなくとも、HTML5だけでカレンダーピッカーが実装できる模様。じゃあカレンダー系はこれでいいかもと思ったがそう甘くないみたい。以下デメリット。
デメリット
IE非対応
リファレンスの互換性情報によるとIEは非対応とのこと。実際にサンプルで試したところピッカーは表示されなかった。
ブラウザによってデザイン、挙動が微妙に異なる
firefoxだと該当テキストボックスをクリックするとカレンダーピッカーが表示されるが、EdgeやChromeだとテキストボックス右側にあるカレンダーっぽいアイコンをクリックしないとピッカーが表示されない。
また、カレンダー自体のデザインも微妙に異なる。
オプション項目が少ない
リファレンスのオプション項目っぽいところを見ると以下3つのみ指定可能の模様。
max 受け付けられる最も遅い日付 min 受け付けられる最も早い日付 step 上下スピナーボタンで値を調整する時や、日付の検証の時の刻み間隔
所感
手軽に導入できそうなもののIE非対応というのが表示厳しいところ。IEは2022年6月15日にサポート終了らしいので、それ以降だとちょっとしたフォームにつけるぐらいなら使えるかも。
リファレンス
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/date
関連記事
-
-
Googleカレンダーに追加する(予定を登録する)リンクを設置する方法
あるサイトに「Googleカレンダーに追加する(予定を登録する)ボタンを設置して ...
-
-
lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方 ...
-
-
readonlyについて
日付ピッカーとかをテキストボックスに入れた際に、 ピッカー入力とあわせて直接入力 ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
form送信後にURLにアンカータグ(ハッシュタグ)をつける方法
フォームからGETもしくはPOSTで送信し、その後のURLにアンカータグ(ハッシ ...