showPicker()でinput要素のDatePickerやSelect要素のドロップダウンメニューを表示する
type="date"やtype="color"属性を指定したinput要素を、HTMLInputElement#showPicker()メソッドを使うことでJavaScriptから表示できる。
同じようにselect要素のドロップダウンメニューをHTMLSelectElement#showPicker()メソッドを使って表示することもできる。
input[type="date"]やselectは見た目的な問題もあるので、デザイン性の高いウェブサイトでは隠し要素にしつつ、装飾用の要素を表示し、showPicker()を使ってブラウザ標準のDatePickerやColorPicker、ドロップダウンメニューなどを表示することができる。
ブラウザの対応状況は以下の通り。
<input id="date" type="date">
<button id="open-date" type="button">Show picker</button>
<select id="list">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button id="open-list" type="button">Show menu</button>
document.querySelector('#open-date').addEventListener('click', () => {
const dateInput = document.querySelector('#date')
dateInput.showPicker()
})
document.querySelector('#open-list').addEventListener('click', () => {
const list = document.querySelector('#list')
list.showPicker()
})
注意点
セキュリティ的な観点から、ユーザーイベント（クリックなど）をトリガーとしなければshowPicker()を呼び出すことができない。
Uncaught NotAllowedError: Failed to execute ‘showPicker’ on ‘HTMLInputElement’: HTMLInputElement::showPicker() requires a user gesture.
他にも、クロスオリジンのiframeからshowPicker()を呼び出すことはできない。
Uncaught SecurityError: Failed to execute ‘showPicker’ on ‘HTMLInputElement’: showPicker() called from cross-origin iframe.