HTMLInputElement.showPicker()
HTMLInputElement.showPicker()
メソッドは、ブラウザーのピッカーをユーザーに表示します。
ブラウザーのピッカーは、その要素が "date"
, "month"
, "week"
, "time"
, "datetime-local"
, "color"
, "file"
の型のうちの何れかである場合に表示されます。これは <datalist>
要素や autocomplete
属性からの項目を表示することもできます。
返値
undefined
です。
例外
NotAllowedError
のDOMException
-
タッチジェスチャーやマウスクリックなどのユーザージェスチャーに応答して呼び出されなかった場合に発生します。
SecurityError
のDOMException
-
別オリジンの iframe の中で呼び出した場合に発生します。
構文
element.showPicker();
例
この例のボタンをクリックすると、ブラウザーの日付ピッカーが表示されます。
HTML
<input type="date">
<button>日付ピッカーを表示</button>
JavaScript
const button = document.querySelector("button");
const dateInput = document.querySelector("input");
button.addEventListener("click", () => {
try {
dateInput.showPicker();
// 日付ピッカーが表示されます。
} catch (error) {
window.alert(error);
// 失敗した場合は外部ライブラリーを使用してください。
}
});
結果
仕様書
Specification |
---|
HTML Standard # dom-input-showpicker |
ブラウザーの互換性
BCD tables only load in the browser