これまで、日付選択ツールを表示するには、カスタム ウィジェット ライブラリやハックに頼る必要がありました。ウェブ プラットフォームに 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://cdpn.io/web-dot-dev/fullpage/LEVKVdr でデモを利用できます。このデモでは、ブラウザでサポートされているすべてのピッカーを試すことができます。
ブラウザ サポート
showPicker() は Chrome 99 以降で利用できます。
次のステップ
執筆時点では、showPicker() はウェブ プラットフォームの新機能です。この機能は、今後追加の作業が必要になる可能性があります。
- ウェブ デベロッパーから要望があれば、今後同様の
showPicker()を<select>要素に追加する可能性があります。 closePicker()が有用である可能性があり、ウェブ デベロッパーからリクエストがあれば追加を検討する可能性があります。- 権限ポリシーを追加して、親チェーンが許可している場合にクロスオリジン iframe でブラウザ選択ツールを表示できるようにします。
フィードバック
Chrome チームとウェブ標準コミュニティは、showPicker() の使用感についてご意見をお待ちしています。
デザインについて教えてください
showPicker() が想定どおりに動作しない場合は、アイデアを実装するために必要なメソッドやプロパティが不足しているか？セキュリティ モデルについて質問やコメントがある場合
- WHATWG GitHub リポジトリで仕様に関する問題を報告するか、既存の問題に意見を追加します。
実装に関する問題ですか？
Chrome の実装にバグが見つかりましたか？それとも、実装が仕様と異なるのでしょうか？
- https://new.crbug.com でバグを報告します。できるだけ多くの詳細情報と、再現するための簡単な手順を記載してください。
サポートを表示
showPicker() を使用する予定はありますか？公開サポートは、Chrome チームが機能の優先順位を決定するのに役立ち、他のブラウザ ベンダーにサポートの重要性を示すことができます。
@ChromiumDev にツイートして、どこでどのように使用しているかをお知らせください。
関連情報
謝辞
この記事をレビューしてくれた Joe Medley に感謝します。カレンダーの画像: Eric Rothermel（Unsplash）