2018年3月3日土曜日

各ブラウザにおけるinput要素date型(<input type="date">)の表示


オフィス狛 技術部です。

一昔前は、Webシステムのカレンダー入力フォームと言えば、jQuery UI Datepicker が定番でした。
HTML5が使われ始めてからは、新たに追加された input要素のdate型(<input type="date">)を使う事が増えてきました。
ただ、ブラウザによって表示が微妙に異なるので、毎度問い合わせが発生します。 今回、備忘録も兼ねて、各ブラウザでどう表示されるかまとめてみました。

・初期値無し(<input type="date" value="">)


Internet Explorer 11
IEでは、<input type="text"> と同様の表示になります。


Microsoft Edge
初期値無しの場合、「yyyy/mm/dd」と表示されます。
ドラム式のUIで、日付を選択します。


Google Chrome(Windows)
初期値無しの場合、「年/月/日」と表示されます。
カレンダーUIで、日付を選択します。


Firefox(Windows)
初期値無しの場合、「yyyy/mm/dd」と表示されます。
カレンダーUIで、日付を選択します。


Google Chrome(Mac)
初期値無しの場合、「年/月/日」と表示されます。
カレンダーUIで、日付を選択します。


Firefox(Mac)
初期値無しの場合、「yyyy/mm/dd」と表示されます。
カレンダーUIで、日付を選択します。


Safari(Mac)
Safari(Mac)では、<input type="text"> と同様の表示になります。


・初期値有り(<input type="date" value="2018-01-01">)

初期値の設定は value に表示したい日付を入力する。
※value の形式は yyyy-mm-dd である必要があります。
初期値無しの表示形式が yyyy/mm/dd となっていますが、実際に value に yyyy/mm/dd 形式で設定しても表示されません。
また、存在しない日付を value に入力しても初期値として設定されません。



Internet Explorer 11
valueに設定した値がそのまま表示されます。
IEはテキストボックスになってしまうので、文字を入力しても表示されます。


Microsoft Edge
valueに設定した日付が選択状態で表示されます。


Google Chrome(Windows)
valueに設定した日付が選択状態で表示されます。


Firefox(Windows)
valueに設定した日付が選択状態で表示されます。


Google Chrome(Mac)
valueに設定した日付が選択状態で表示されます。


Firefox(Mac)

valueに設定した日付が選択状態で表示されます。


Safari(Mac)

valueに設定した値がそのまま表示されます。
Safari(Mac)はテキストボックスになってしまうので、文字を入力しても表示されます。

・スマートフォンのブラウザでの表示


Android




iPhone



IEとSafariでは普通のテキストボックス形式で表示されてしまうので、注意が必要です。
ブラウザごとに UI に微妙に違いがあることを忘れないようにしたいですね。


0 件のコメント:

コメントを投稿