【比較】ここまで違う！ブラウザごとのHTML5標準カレンダーのUI

3101 ワード
firefox edge Chrome InternetExplorer HTML5 HTML5 テキストリンク

はじめに

今回は、HTML5のカレンダーのUIをブラウザ同士で比較していきます。

HTML5標準カレンダーとは

HTML5では、以下のフォームコントロールが新たに追加されています。
これは、日付入力用のテキストボックスです。

日付入力用のテキストボックス
<INPUT type="date">

MDM web Docsによると、

date 型の 要素は、中身を自動的に検証するテキストボックスまたは特殊な日付選択インターフェイスを使用して、
ユーザーに日付を入力させる入力フィールドを生成します。結果の値には年、月、日が含まれますが、時刻は含まれません。
time 及び datetime-local 入力型は時刻や日付と時刻の入力に対応しています。

コントロールのユーザーインターフェイスは、一般にブラウザ―によってまちまちです。
現時点で対応は不安定であり、詳細はブラウザーの対応を参照してください。
対応していないブラウザーでは、このコントロールは単純な に格下げされます。

とのことなので、どんな表示をするのかを比較します。

対応ブラウザ

対応ブラウザは以下の通り。

ブラウザ 対応
IE 11 ×
Microsoft Edge ○
Chrome ○
Firefox ○
Safari ×

ユーザーインターフェース

Edge

リストから日付を選択し、「✓」をクリックすると日付が入力できます。

Chrome

カレンダーの日付をクリックすると日付が入力できます。

Firefox

Chromeと同じく、カレンダーの日付をクリックすると日付が入力できます。

所感

あまりにもUIが違うものがあるので、UIを統一したければjQuery DatePicker等を使用するといいと思います。

参考文献

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date#Browser_compatibility