- この記事は、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> のポップアップ メニューのようにドキュメントから分離されており、現在のところ、サブ要素のスタイル設定の制御方法に関する標準がないため、このような方法は WebKit では提供されません。
jQuery の日付選択ツールとネイティブの日付選択ツールが競合しないようにするにはどうすればよいですか？
Google Chrome で input[type=date] の jQuery 日付選択ツールを試したことがある場合、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();