Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

showPicker() for <input>

HTMLInputElement.showPicker() メソッドは、input 要素のブラウザーのピッカーを表示します。

これは、通常、要素が選択されたときに表示されるピッカーと同じものですが、ボタンを押すなど、ユーザーの操作で起動させることができます。

ブラウザーがよく実装しているのは、"date", "month", "week", "time", "datetime-local", "color", "file" の型の入力欄です。これは <datalist> 要素や autocomplete 属性からの項目を表示することもできます。

もっと一般的に言えば、このメソッドは、ピッカーを持つプラットフォーム上のあらゆる入力要素にピッカーを表示するのが理想的です。

フォーム

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`api.HTMLInputElement.showPicker`	99	99	101	16	99	16
DOM API
`showPicker (color input)` color`入力	99	99	101	16	99
`showPicker (date input)` 日付の入力	99	99	101	17.4	99
`showPicker (datetime local input)` datetime-local`入力	99	99	101	17.4	99
`showPicker (file input)` ファイル`入力	99	99	101	16	99	16

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

HTML

<input type="date" id="dateInput">
<button onclick="document.getElementById('dateInput').showPicker()">
  Select a date
</button>

Trigger the native picker with a button instead of focusing the field manually.

Call showPicker on a color input and update a swatch preview.

Compare fields that may expose a browser picker through the same API.

showPicker() for <input> の活用

HTMLInputElement.showPicker() メソッドは、input 要素のブラウザーのピッカーを表示します。