2018年3月3日土曜日

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


オフィス狛 技術部です。

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

※(2019/07/03 修正:画像リンクがきれていたので、画像リンクを更新しました。このタイミングで、全ブラウザ最新の状態でキャプチャを撮り直しています。)

※  (2021/06/23 修正:Safariでの<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)
 
初期値無しの場合、表示した当日の日付が「yyyy/mm/dd」形式で表示されます。
カレンダーUIで、日付を選択します。


・初期値有り(<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に設定した日付が選択状態で表示されます。


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


Android




iPhone



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

0 件のコメント:

コメントを投稿