- この記事は、Chrome ソフトウェア エンジニアの Kent Tamura が執筆しました。
ご存じのとおり、Google Chrome は Chrome 20 以降、日付選択ツールをサポートしています。input
要素の type
属性を date
に設定するだけで、ユーザーが矢印ボタンをクリックすると、Chrome にカレンダー ウィジェットがポップアップ表示されます。
デベロッパーの皆様から多くのフィードバックをいただいておりますので、この記事では日付選択ツールを最大限に活用するための方法について、いくつかの点を明確にしたいと思います。
言語 / 地域は入力値の日付形式にどのように影響しますか?
ユーザーは input[type=date]
のテキスト フィールドに日付値を入力できます。日付形式はボックスにグレーのテキストとして表示されます。この形式は、オペレーティング システムの設定から取得されます。
![日付形式の画面](https://developer.chrome.google.cn/static/blog/quick-faqs-on-input-type-date-in-google-chrome/image/date-formats-screen-b6171ee0a4b62.jpg?hl=ja)
現在、日付の形式を指定する標準がないため、ウェブ作成者が日付の形式を変更する方法はありません。
サーバーに送信する際、入力値はどのように表されますか?
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();