長い間、日付選択ツールを表示するためにはカスタム ウィジェット ライブラリやハッキングを利用しなければなりませんでした。現在、ウェブ プラットフォームには HTMLInputElement showPicker() メソッドが付属しています。これは、日付だけでなく、時間、色、ファイルについてもブラウザ選択ツールを表示する正規の方法です。
背景
ウェブ デベロッパーからよく寄せられるリクエストは次のとおりです。
プログラムで
Stack Overflow
日付などのコントロールの選択ツールを表示するにはどうすればよいですか？
現在の答えはあまり良くありません。外部ライブラリ、CSS ハッキング、または click() でのユーザー操作のシミュレーションなど、特定のブラウザの動作に依存しています。
ウェブ プラットフォームには、"date"、"month"、"week"、"time"、"datetime-local"、"color"、"file" の各タイプを持つ <input> 要素のブラウザ選択ツールを表示する正規の方法が導入され、間もなくこうした時代は終わります。これは <datalist> または "autocomplete" による提案がある <input> 要素でも機能します。これについてはこの記事でも取り上げます。
選択ツールの表示方法
<input> 要素で showPicker() を呼び出すと、ブラウザ選択ツールがユーザーに表示されます。このメソッドは、タップ操作やマウスクリックなどのユーザー操作に応じて呼び出す必要があります。それ以外の場合は、NotAllowedError 例外で失敗します。セキュリティ上の理由から、クロスオリジンの iframe で呼び出されると、SecurityError 例外がスローされます。
<input> 要素が "date"、"month"、"week"、"time"、"datetime-local"、"color"、"file" のいずれかである場合、ブラウザの選択ツールが表示されます。
次の例は、ブラウザの日付選択ツールを開く方法を示しています。
<input type="date">
<button>Show the date picker</button>
<script>
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// A date picker is shown.
} catch (error) {
// Use external library when this fails.
}
});
</script>
ブラウザ選択ツールには、<datalist> または "autocomplete" の項目を事前入力することもできます。
次の例は、<datalist> を使用してブラウザ選択ツールを開く方法を示しています。
<datalist id="ice-cream-flavors">
<option value="Chocolate"> </option>
<option value="Coconut"> </option>
<option value="Mint"> </option>
<option value="Strawberry"> </option>
<option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>
<script>
const button = document.querySelector("button");
const iceCreamFlavorsInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
iceCreamFlavorsInput.showPicker();
// A picker containing some ice cream flavors is shown.
} catch (error) {
// Use external library when this fails.
}
});
</script>
特徴検出
showPicker() がサポートされているかどうかを確認するには、次のコマンドを使用します。
if ('showPicker' in HTMLInputElement.prototype) {
// showPicker() is supported.
}
デモ
https://show-picker.glitch.me/demo.html のデモで、ブラウザでサポートされているすべての選択ツールをお試しいただけます。
ブラウザ サポート
showPicker() は Chrome 99 以降でご利用いただけます。
次のステップ
この記事の執筆時点では、showPicker() はウェブ プラットフォームとしては新しいものです。この機能は今後、追加の作業が必要になる可能性があります。
- 今後、ウェブ デベロッパーからご要望に応じて、同様の
showPicker()を<select>要素に追加することをおすすめします。 closePicker()は役立つ可能性があります。ウェブ デベロッパーからご要望があった場合は、追加することを検討してください。- 親チェーンで許可されている場合に、クロスオリジンの iframe がブラウザ選択ツールを表示できるようにする権限ポリシーを追加できます。
フィードバック
Chrome チームとウェブ標準コミュニティでは、showPicker() の使用体験についてご意見やご感想をお待ちしています。
デザインについてお聞かせください
showPicker() について、何かご不明な点はございませんか？あるいは、アイデアを実装するために必要なメソッドやプロパティが不足しているか？セキュリティ モデルについてご質問やご意見がある場合
- WHATWG GitHub リポジトリで仕様の問題を提出するか、既存の問題に意見を追加します。
実装に問題がある場合
Chrome の実装にバグが見つかりましたか？あるいは、実装が仕様と異なるのでしょうか？
- https://new.crbug.com でバグを報告します。できるだけ詳細な情報と、簡単な再現手順を記載してください。Glitch は、再現をすばやく簡単に行うのに最適です。
サポートを示す
showPicker() を使用する予定はありますか？公開サポートによって、Chrome チームが機能に優先順位を付け、サポートがいかに重要であるかを他のブラウザ ベンダーに示すことができます。
@ChromiumDev 宛てのツイートで、この機能をどこでどのように使っているかを教えてください。
関連情報
謝辞
この記事をレビューしてくれた Joe Medley に感謝します。Eric Rothermel 氏による Unsplash のカレンダー画像写真