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

関連情報