勉強したことのメモ

webプログラマが勉強したことのメモ。

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

 - HTML

  関連記事

mp3ファイルのアップロードと再生方法

mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...

submitについて

<button>タグや「input type="image"」はデフ ...

fieldsetタグ

システムの機能追加時に<fieldset>という 見たこと無いタグが ...

HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

readonlyについて

日付ピッカーとかをテキストボックスに入れた際に、 ピッカー入力とあわせて直接入力 ...

thead/tbody/tfootタグについて

テーブルのソートで何気なく使った<thead>と<tbody& ...

オブジェクトタグ/エンベットタグ

<object> <embed> 見たこと、聞いたことが ...

クロスドメインな状況でiframeがIEのみ挙動がおかしくなる場合

iframeで別のドメインのサイトを表示させた場合に、firefoxやchrom ...

formのテキストボックスやテキストエリアにサンプルの値を表示させる

テキストボックスでplaceholderという 見かけない記述があったのでメモ。 ...