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