Google Chrome が input[type="date"] でデートピッカー表示に対応

公開日:

Google Chrome が <input type="date"/> でデートピッカーを表示するようになりました。どうも今年6月にリリースされたバージョン20からサポートされているようです。

従来は唯一Operaのみがデートピッカーを表示していましたが、Chromeのカレンダーは全体的にかなり良い出来になっていると感じました。操作してみていくつか気づいた点などを。

図1:Opera 12.00 のデートピッカー
図2:Google Chrome 21 のデートピッカー

直接入力が可能

Operaの場合はカレンダーから日付を選択することしかできませんが、Chromeは直接値を入力することもできます。

入力形式は YYYY-MM-DD と YYYY/MM/DD に対応しているようです。ただし、いずれの場合も送信される値はHTML5の仕様(www.w3.org)どおり、 YYYY-MM-DD となります。

ちょっと改善して欲しいと思ったのが不正な日付を入力したときの動作で、 YYYYMMDD などの認識しないパターンや "2012-09-31" のように存在しない日付を入力した場合は、空文字(value属性が設定されている場合はその値)に戻されてしまいます。これは入力値はそのままにエラー表示を行ってくれた方が良いと感じました。

value属性なしの場合は本日日付がデフォルト選択

value属性が設定されていない場合、Chromeは本日日付の部分に青い背景色が設定されます。

さらにカレンダーを表示した段階でそこにフォーカスがあたっている状態になっているため、キーボード操作での日付選択が便利だと感じました。たとえば9月27日に29日チェックインのホテルを予約する場合、Chormeでは「↓」キーでカレンダーを表示した後、「→」キーを2回押すだけで希望の日が選択できます[1]

和暦も表示

Chromeは「2012年(平成24年)」のように和暦も併記されます。日本語版特有の機能なのでしょうが、これはありがたいですね。いまのところ対応しているのは平成99年(2087年)までで、それ以降は西暦表記のみとなります。

「クリア」ボタン

以前も書きましたが、Operaはバージョン11でなぜか「なし」ボタンが廃止されてしまい、一度値を設定すると空にはできなくなってしまいましたが、Chromeには同様の機能を持った「クリア」ボタンがあります。

注意したいのは「リセット」ではなく「クリア」なので、value属性によって初期値が設定されているときも元の値に戻るのではなく空にされてしまいます。

なお、required属性が付いた入力必須の状態では「クリア」ボタンは表示されません。

カレンダーの曜日

Operaは月曜始まりですが、Chromeは日曜始まりです。

また、Operaは日曜日が赤色で表示されますが(祝日や国民の休日には対応していない)、Chromeはすべて黒色でちょっと分かりにくい感じがします。ホテルや交通系の予約サイトなどでよく見られる、JavaScriptを使ったカレンダーでは実装されていることも多いので、今後のアップデートに期待したいです。

対応している最小値と最大値

Opera, Chromeともカレンダーで選択できる範囲には限界があります。

ブラウザ最小値最大値
Opera1582-01-019999-12-31
Chrome1901-01-01275760-09-13

Chromeは1900年以前を選択することができませんが、直接入力は可能なことと、そこまで古い日付をカレンダーから選択するのが現実的に難しいため[2]、大きな問題にはならないと思います。

ただし、ユーザーが

  • カレンダーから選択するだけでなく直接入力も可能である
  • 西暦999年以前を入力する場合は頭に 0 を加えて4桁になるよう入力しないといけない

ということを理解していないと混乱の原因になってしまうと思われます。古文書の検索システムなど古い日付を扱うフォームでは、ユーザー向けに注釈を記すなどの対応があったほうが良いかもしれません。

あと、Operaは現状1581年以前の日付を選択することができないので[3]、はやく直接入力に対応してほしいですね。

対応しているのは type="date" だけ

Operaは "datetime" や "month", "week" などにも対応していますが、Chromeは今のところ(バージョン21)は "date" のみの対応のようです。

  • [1]Operaでも Alt + ↓ でカレンダーを表示させるのではなく、上下キーまたは左右キーのみで(カレンダーを表示させずに)日付の前後操作を行う場合は本日日付が基準になりますが、やはりカレンダーを表示しながら操作した方が分かりやすいことなどから、Chrome形式の方が使いやすいと感じました。
  • [2]仮にカレンダーから選択するとしたら、「<<」ボタンを100回以上押さなければなりません(value属性未指定の場合)。
  • [3]カレンダーを表示させずに上下キーまたは左右キーで(ものすごくがんばって)操作すれば、一応それ以前の日付も選択できますが。