Hebikuzure's Tech Memo

2015年12月1日

HTML5 の日付入力 (カレンダーの表示)

Filed under: Windows Info — hebikuzure @ 7:28 PM

この記事は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 検索すると詳しい使い方を解説した日本語ページも見つかりますので、ここでは紹介のみに留めます。

参考情報

広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com で無料サイトやブログを作成.

%d人のブロガーが「いいね」をつけました。