この記事はWe Love HTML5 Advent Calendar 2015 の第1日目の記事として投稿しています
Advent Calendar の初日の記事なので、カレンダーについての情報です。HTML5 では form 要素が強化され、さまざまにデータの種類に対して最適なフォームを表示することができるようになりました。日付や時刻はフォームへの入力に頻繁に利用されるデータ形式ですが、form 内の input 要素のtype 属性にいろいろな値を設定することで、いろいろなパターンの日付や時刻を分かりやすく入力できるようになっています。
ブラウザーはページに記述されている type 値に応じて、入力が容易になるようなコントロール (例えばカレンダー) を表示して、ユーザーを補助することができます。
例えば日付の入力であれば、以下のような HTML で
<form action=”datepicker.html”>
誕生日を入力してください:
<input type=”date” name=”bday”>
<input type=”submit”>
</form>
ブラウザーは次のようなカレンダーを表示して選択することができます。
ただしこのスクリーンショットは Windows 版の Google Chrome でページを表示した場合で、他のブラウザーでは異なったコントロールが表示されます。
例えば Microsoft Edge では以下のようなドラムロール風のコントロールが表示されます。
Firefox は残念ながら現行のリリースバージョンでは input type=”date” に対応しておらず、特別なコントロールは表示されません。Opera では Chrome と同じコントロールが表示されます。これは同じ Blink エンジンでレンダリングしているのだから当然ですね。
実際に試してみることができるよう、テスト ページ (http://hebikuzure.com/datepicker.html) を用意しました。ご自分の利用しているブラウザーでそれぞれの指定がどのように表示されるのか、試してみてください。
このように HTML5 の標準仕様では input 要素のtype 属性値に対して実際にどのようなコントロールを表示するのかは、ユーザー エージェント (ブラウザーなど) に任されています。そのため type 属性に date 値を指定した場合でも、ブラウザーごとに実際に表示されるコントロールは異なってしまいます。
Chrome や Opera はデスクトップ版とモバイル (Android など) 版が別なので、それぞれのプラットフォームで利用しやすそうなコントロール (デスクトップでは普通のカレンダー形式、モバイルではドラムロール) を表示するのに対して、Microsoft Edge はモバイルでもデスクトップでも UWP (ユニバーサル Windows プラットフォーム) アプリで共通のプログラムなので、モバイルで利用しやすいドラムロールがデスクトップでも表示されるのでしょう (これは何かの方法で改善してほしい処ですが…)。
それではどのブラウザーで表示しても同じようなカレンダーなどの入力補助コントロールを表示させるにはどうすればよいのでしょうか。残念ながらこれは何らかの UI ライブラリの力を借りるしかなさそうです。例えば jQuery UI の Datepicker Widget や、bootstrap-datepicker などがその候補になるでしょう。それぞれの名前で Web 検索すると詳しい使い方を解説した日本語ページも見つかりますので、ここでは紹介のみに留めます。
Hebikuzure's Tech Memo 