顯示瀏覽器挑選器以列出日期、時間、顏色和檔案

法蘭索瓦博福
François Beaufort
GitHub

長期以來，您必須自訂小工具程式庫或小程式，才能顯示日期挑選器。網路平台現在提供 HTMLInputElement showPicker() 方法，可用於顯示瀏覽器挑選器，不僅可用於顯示日期，還能同時顯示時間、顏色和檔案。

背景

網頁開發人員提出的常見要求如下：

如何透過程式輔助方式
顯示日期等控制項的挑選器？

Stack Overflow

目前的解答並不完善，因此仰賴外部程式庫、CSS 駭客攻擊或特定瀏覽器行為 (例如模擬使用者與 click() 的互動)。

很高興在此宣布，網路平台導入標準方法，可顯示下列類型的 <input> 元素瀏覽器挑選器："date"、"month"、"week"、"time"、"datetime-local"、"color" 和 "file"。它也適用於根據 <datalist> 或 "autocomplete" 提供的建議 <input> 元素，我們會在本文中一併說明。

瀏覽器挑選器的螢幕截圖
Chrome 電腦版、Chrome 行動版、Safari 電腦版、Safari 行動版和 Firefox 電腦版瀏覽器日期挑選器 (2021 年 7 月)。

如何顯示挑選器

對 <input> 元素呼叫 showPicker() 時，系統會顯示瀏覽器挑選器。您必須呼叫此方法以回應使用者手勢 (例如觸控手勢或滑鼠點擊)，否則就會失敗並發生 NotAllowedError 例外狀況。基於安全考量，在跨來源 iframe 中呼叫時，系統會擲回 SecurityError 例外狀況。

<input> 元素屬於下列類型之一時，就會顯示瀏覽器挑選器："date"、"month"、"week"、"time"、"datetime-local"、"color" 或 "file"。

以下範例說明如何開啟瀏覽器日期挑選器。

<input type="date">
<button>Show the date picker</button>

<script>
  const button = document.querySelector("button");
  const dateInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      dateInput.showPicker();
      // A date picker is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

瀏覽器挑選器也可以預先填入來自 <datalist> 或 "autocomplete" 的項目。

以下範例說明如何使用 <datalist> 開啟瀏覽器挑選器。

<datalist id="ice-cream-flavors">
  <option value="Chocolate"> </option>
  <option value="Coconut"> </option>
  <option value="Mint"> </option>
  <option value="Strawberry"> </option>
  <option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>

<script>
  const button = document.querySelector("button");
  const iceCreamFlavorsInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      iceCreamFlavorsInput.showPicker();
      // A picker containing some ice cream flavors is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

特徵偵測

如要檢查是否支援 showPicker()，請使用：

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

示範

https://show-picker.glitch.me/demo.html 提供示範，可讓您使用瀏覽器支援的所有挑選器。

瀏覽器支援

Chrome 99 以上版本支援「showPicker()」。

後續步驟

撰寫本文時，showPicker() 是網路平台的新手。這項功能未來可能還需要額外處理：

  • 日後如果網頁程式開發人員要求，我們可能會希望 <select> 元素加入類似的 showPicker()。
  • closePicker() 可能有助益，當網頁程式開發人員要求時，我們可以考慮加入。
  • 我們可以新增權限政策，讓不同來源 iframe 在父項鏈結允許的情況下，顯示瀏覽器挑選器。

意見回饋

Chrome 團隊和網路標準社群想瞭解您使用 showPicker() 的經驗。

介紹設計

「showPicker()」有什麼功能不如預期嗎？或者，是否缺少實作構想所需的方法或屬性？對安全模型有任何疑問或意見嗎？

執行時遇到問題嗎？

您在導入 Chrome 時發現錯誤嗎？還是實作方式與規格不同？

  • 前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳盡的資料，以及簡易的重現操作說明。Glitch 適合用於分享快速又簡單的提交內容，

顯示支援服務

您打算使用「showPicker()」嗎？您的公開支援團隊可協助 Chrome 團隊決定各項功能的優先順序，並向其他瀏覽器供應商顯示支援的功能。

請發文至 @ChromiumDev，讓我們知道您的位置和使用方式。

特別銘謝

感謝 Joe Medley 閱讀這篇文章。 Eric Rothermel 為 Unsplash 提供的日曆相片。