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

François Beaufort
François Beaufort
GitHub

長期以來，您必須使用自訂小工具程式庫或駭客攻擊才能顯示日期挑選器。網頁平台現在會隨附 HTMLInputElement showPicker() 方法，這是顯示瀏覽器挑選器的標準方式，不僅可用於日期，還可用於時間、顏色和檔案。

背景

我們經常聽到網頁開發人員提出要求：

如何以程式輔助方式
針對日期等控制項顯示挑選器？

Stack Overflow

目前的解決方法並不理想，因為它們需要外部程式庫、CSS 駭客攻擊，或是特定瀏覽器行為 (例如模擬使用者與 click() 互動)。

很高興告訴您，這些日子很快就會結束，因為網路平台正在推出標準方式，針對 <input> 元素顯示瀏覽器挑選器，這些元素的類型包括 "date"、"month"、"week"、"time"、"datetime-local"、"color" 和 "file"。這項功能也適用於 <input> 元素，其中建議內容由 <datalist> 或 "autocomplete" 提供，我們也會在本文中說明這項功能。

瀏覽器挑選器的螢幕截圖
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 查看示範。

瀏覽器支援

showPicker() 適用於 Chrome 99 以上版本。

後續步驟

截至本文撰寫時為止，showPicker() 是網路平台的新功能。這項功能日後可能需要額外的工作：

  • 如果網頁開發人員要求，我們可能會在未來將類似的 showPicker() 新增至 <select> 元素。
  • closePicker() 可能會很實用，如果網頁開發人員要求，我們會考慮新增這個功能。
  • 我們可以新增權限政策，讓跨來源 iframe 在其父鏈結允許的情況下，顯示瀏覽器挑選器。

意見回饋

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

請提供設計相關資訊

showPicker() 是否有任何功能無法正常運作？或者，您是否缺少實作想法所需的方法或屬性？您對安全性模型有疑問或意見嗎？

導入時發生問題？

你是否發現 Chrome 實作項目有錯誤？還是實作方式與規格不同？

  • 請前往 https://new.crbug.com 提交錯誤。請務必盡可能提供詳細資訊，並附上重現問題的簡單操作說明。Glitch 可讓您輕鬆快速地分享重現內容。

顯示支援

您是否打算使用 showPicker()？您的公開支援有助於 Chrome 團隊將功能排定優先順序，並向其他瀏覽器供應商顯示支援這些功能的重要性。

請發推文給 @ChromiumDev，告訴我們你在哪裡使用這項功能，以及使用方式。

特別銘謝

感謝 Joe Medley 審查本文。日曆圖片由 Eric Rothermel 提供，並發布於 Unsplash。