2022/01/24 時点の英語版に基づき新規翻訳

1 files changed, 80 insertions, 0 deletions

diff --git a/files/ja/web/api/htmlinputelement/showpicker/index.md b/files/ja/web/api/htmlinputelement/showpicker/index.md
new file mode 100644
index 0000000000..54a13e2ba9
--- /dev/null
+++ b/files/ja/web/api/htmlinputelement/showpicker/index.md
@@ -0,0 +1,80 @@
+---
+title: HTMLInputElement.showPicker()
+slug: Web/API/HTMLInputElement/showPicker
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - メソッド
+  - NeedsCompatTable
+  - リファレンス
+browser-compat: api.HTMLInputElement.showPicker
+translation_of: Web/API/HTMLInputElement/showPicker
+---
+{{ APIRef("HTML DOM") }}
+
+**`HTMLInputElement.showPicker()`** メソッドは、ブラウザーのピッカーをユーザーに表示します。
+
+ブラウザーのピッカーは、その要素が `"date"`, `"month"`, `"week"`, `"time"`, `"datetime-local"`, `"color"`, `"file"` の型のうちの何れかである場合に表示されます。これは {{htmlelement("datalist")}} 要素や [`autocomplete`](/ja/docs/Web/HTML/Attributes/autocomplete) 属性からの項目を表示することもできます。
+
+### 返値
+
+{{jsxref("undefined")}} です。
+
+### 例外
+
+- `NotAllowedError` の {{domxref("DOMException")}}
+  - : タッチジェスチャーやマウスクリックなどのユーザージェスチャーに応答して呼び出されなかった場合に発生します。
+- `SecurityError` の {{domxref("DOMException")}}
+  - : 別オリジンの iframe の中で呼び出した場合に発生します。
+
+## 構文
+
+```js
+element.showPicker();
+```
+
+## 例
+
+この例のボタンをクリックすると、ブラウザーの日付ピッカーが表示されます。
+
+### HTML
+
+```html
+<input type="date">
+<button>日付ピッカーを表示</button>
+```
+
+### JavaScript
+
+```js
+const button = document.querySelector("button");
+const dateInput = document.querySelector("input");
+
+button.addEventListener("click", () => {
+  try {
+    dateInput.showPicker();
+    // 日付ピッカーが表示されます。
+  } catch (error) {
+    window.alert(error);
+    // 失敗した場合は外部ライブラリーを使用してください。
+  }
+});
+```
+
+### 結果
+
+{{EmbedLiveSample("Example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{ HTMLElement("input") }}
+- {{ domxref("HTMLInputElement") }}