DOM

：

：

HTMLInputElement.showPicker() メソッド

　編集：2022.11.07 by T.A.

[Edge]。→、、

HTMLInputElement のピッカーを表示します。

type が date、month、week、time、datetime-local、color、file の場合に適用されます。

IFRAME の中ではできないようです。

mdn： ブラウザーのピッカーをユーザーに表示します。

mdn： ブラウザーのピッカーは、その要素が "date", "month", "week", "time", "datetime-local", "color", "file" の型のうちの何れかである場合に表示されます。これは <datalist> 要素や autocomplete 属性からの項目を表示することもできます。

構文
HTMLInputElement.showPicker()
HTMLInputElement HTMLInputElement。
戻り値

undefined。

例外
NotAllowedError／DOMException
タッチ ジェスチャーやマウス クリックなどのユーザー ジェスチャーに応答して呼び出されなかった場合に発生します。
SecurityError／DOMException
別オリジンの iframe の中で呼び出した場合に発生します。
例
mdnより

この例のボタンをクリックすると、ブラウザーの日付ピッカーが表示されます。

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);
    // 失敗した場合は外部ライブラリーを使用してください。
  }
});

エラー発生：SecurityError: Failed to execute 'showPicker' on 'HTMLInputElement': HTMLInputElement::showPicker() called from cross-origin iframe.

SecurityError: 'HTMLInputElement' で 'showPicker' を実行できませんでした: HTMLInputElement::showPicker() がクロスオリジン iframe から呼び出されました。

type=date の場合

HTML： 

<!DOCTYPE HTML>
<HTML lang="ja">
<HEAD>
<META charset="utf-8">
<META http-equiv="default-style" content="text/css">
<TITLE>DOM：HTMLInputElement.showPicker メソッド：テスト</TITLE>
</HEAD>

<BODY>

<INPUT id=IdTest type=date>
<BUTTON id=IdButton>日付ピッカーの表示</BUTTON>

<SCRIPT>
function Job(){
  IdTest.showPicker();
}
IdButton.onclick=Job;
</SCRIPT>

</BODY>
</HTML>

以下の様に表示されました。

テスト