- この記事は 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 の日付選択ツールとネイティブの日付選択ツールの競合を回避するにはどうすればよいですか？
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();