HTML5日付ピッカー

最近、RMOUG Training Days 2011のHTML5デモンストレーションでOperaを使用することにしたことを投稿しました。その投稿で述べたように、デモ対象のセットにOpera Webブラウザーを追加する大きな理由は、HTML5機能の一部をサポートしていることです。他のブラウザよりも優れています。この投稿では、これらのケースの1つであるHTML5日付ピッカーについて説明します。

FlexまたはJQueryなどのJavaScriptライブラリを使用することの小さいながらも優れた点の1つは、ユーザーフレンドリーな入力コントロールのための組み込みメカニズムが利用できることです。特に、良い日付ピッカーは常に高く評価されています。

HTML5は現在、HTMLタグで使用できる標準の日付ピッカーウィジェットを提供する予定です。この投稿では、5つの人気のあるWebブラウザー(Chrome 8、Safari 5、Firefox 3.6、Internet Explorer 8、およびOpera 11)の最近の非ベータ版でのHTML5日付ピッカーの状態を確認します。

HTMLは、inputタグを介してさまざまな入力フィールドをサポートします。さまざまなタイプの入力フィールドは、input要素のtype属性を介して指定されます。HTML5typeは、指定できる使用可能なの数を劇的に増やします。新しい値のいくつかのtype属性が、日付/時間に関連するものが含まれる:datedatetimedatetime-localmonthweek、とtime。これらのそれぞれは、次のHTMLコードスニペットに示されています。

   HTML5 Date Pickers Demonstrated    
    
Input Type Input Field
date
datetime
datetime-local
month
week
time

以前にリストした5つのWebブラウザーの中で、Operaはタグtypeの日付/時刻の最も洗練された実装を提供しinputます。ポジティブから始めて、最初のいくつかの画面スナップショットは、この単純なHTMLがOpera11でどのようにレンダリングされるかを示しています。

Opera11ページの初期レンダリング

Opera11入力タグの「日付」属性

Opera11入力タグ「datetime」属性

Opera11入力タグ「datetime-local」属性

Opera11入力タグ「月」属性

Operaの実装は、選択される月全体を強調しています。

Opera11入力タグの「週」属性

Operaは、選択される週を強調表示します。

Opera11入力タグの「時間」属性

Opera11-選択されたすべての入力フィールド

Operaの日付/時刻入力フィールドの実装は印象的です。他の非ベータブラウザについても同じことが言えるといいのですが。残念ながら、他のブラウザは、このエレガントに近い場所ではこれらのフィールドタイプをサポートしていません。実際、ここにすべての画面スナップショットを含める価値すらないと思います。代わりに、すべてのフィールドに入力した後、それぞれの画面スナップショットを表示するだけです。ほとんどの場合、ブラウザはこれらのフィールドを単純な「テキスト」タイプのフィールドとして扱いました。

Firefox 3.6の日付ピッカー:単なるテキストです

Internet Explorer 8の日付ピッカー:単なるテキストです

Safari 5の日付ピッカー:フォーカスが強調表示された単なるテキストです

Chrome 8の日付ピッカー:あまりありません

Operaの日付/時刻フィールドの扱いほどエレガントではありませんが、Chromeブラウザはこれらのフィールドをテキスト以上のものとして扱い、フィールドに入力できる内容を制限します。残念ながら、Operaが提供するような日付/時刻の選択ポップアップはありません。それでも、フォーカスされたフィールドの強調表示は素晴らしく、選択されたデータがフォーマットのように日付/時刻であるという事実が役立ちます。

結論

主要なブラウザが一貫して標準化された日付/時刻コントロールをサポートし、適切な属性を持つ単純なHTML「入力」タグがどのブラウザでもエレガントでスタイリッシュな日付/時刻セレクターをレンダリングする日を楽しみにしています。Opera 11は現在パックをリードしており、何ができるかを最もよく示しています。

このストーリー「HTML5DatePicker」は、もともとJavaWorldによって公開されました。