- この記事は、Chrome ソフトウェア エンジニアの Kent Tamura が執筆しました。
ご存じのとおり、Google Chrome は Chrome 20 以降、日付選択ツールをサポートしています。input 要素の type 属性を date に設定するだけで、ユーザーが矢印ボタンをクリックすると、Chrome にカレンダー ウィジェットがポップアップ表示されます。
デベロッパーの皆様から多くのフィードバックをいただいておりますので、この記事では日付選択ツールを最大限に活用するための方法について、いくつかの点を明確にしたいと思います。
言語 / 地域は入力値の日付形式にどのように影響しますか？
ユーザーは input[type=date] のテキスト フィールドに日付値を入力できます。日付形式はボックスにグレーのテキストとして表示されます。この形式は、オペレーティング システムの設定から取得されます。
現在、日付の形式を指定する標準がないため、ウェブ作成者が日付の形式を変更する方法はありません。
サーバーに送信する際、入力値はどのように表されますか？
GET / POST などの HTTP リクエストの input[type=date] から解釈された日付値は、yyyy-mm-dd としてフォーマットされます。
入力値はどのような形式で返されますか？
input.value は、表示形式に関係なく常に yyyy-mm-dd として返されます。
入力値はどのような形式を受け入れますか？
input.value をプログラムで設定する場合、値は初期値と JavaScript で挿入された値の両方の表示形式に関係なく、yyyy-mm-dd スタイルのみを受け入れます。
日付選択ツールの外観を変更するにはどうすればよいですか？
現在のところ、日付選択ツールの外観をスタイル設定することはできません。WebKit では、これまで -webkit-appearance CSS プロパティまたは ::-webkit-foo 擬似クラス セレクタを使用してフォーム コントロールにスタイルを設定できました。ただし、WebKit では、カレンダー ポップアップは <select> のポップアップ メニューのようにドキュメントから分離されているため、このような方法は提供されていません。また、現在のところ、サブ要素のスタイル設定方法に関する標準はありません。
jQuery Datepicker とネイティブの日付選択ツールの競合を回避するにはどうすればよいですか？
Google Chrome の input[type=date] で jQuery Datepicker を試したことがある場合は、jQuery UI とネイティブ カレンダー ポップアップの両方のカレンダーが重なって表示されることに気づいたかもしれません。すべてのプラットフォームに jQuery Datepicker を適用する場合は、input[type=date] の代わりに input[type=text] を使用します。Google Chrome だけでなく、iOS Safari、BlackBerry ブラウザ、Opera にも input[type=date] 用の独自の UI があり、現在のところ、input[type=date] を使用してすべてのプラットフォームで統一された UI を実現する方法はありません。input[type=date] をサポートしていないプラットフォームにのみ jQuery Datepicker を適用する場合は、Modernizr または次のコードを使用できます。
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();