input type dateとtime の端末・ブラウザ毎の違い

HTML5から追加されたinput type dateやdateの見た目や挙動がブラウザや端末毎に違い、統一するのに苦労したので
それぞれの違いや合わせ方をまとめてみた。

まず

というソースを各ブラウザでみると

ブラウザ・端末毎の表示

Chrome

chrome

  • 自動Validate機能が有る
  • カレンダーUIから入力できる

Edge

  • カレンダーUIから入力できる(というかキーボード入力ができない)

Safari

  • マウス・キーボードで1日ずる進めていける

IE

  • input type=”text”と同じ

Firefox

  • input type=”text”と同じ

iOS

  • キーボード入力できない。っていうかこれセレクトボックスじゃね?

android(experia)

  • カレンダーUIからのみ入力できる

iOSではCSSが効かない場合がある

iOSではwidthにパーセント指定しても利きません。そういう場合は

-webkit-appearance: none;

を指定してブラウザ独自の装飾を解除すると効くようになります。