オフィス狛 技術部です。
一昔前は、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で、日付を選択します。
※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 に微妙に違いがあることを忘れないようにしたいですね。
・初期値有り(<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 件のコメント:
コメントを投稿