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

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://cdpn.io/web-dot-dev/fullpage/LEVKVdr 試用版中，使用瀏覽器支援的所有挑選器。

瀏覽器支援

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

後續步驟

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

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

意見回饋

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

請說明設計內容

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

導入時發生問題嗎？

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

  • 前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳細資料，以及重現問題的簡單操作說明。

顯示支援

你打算使用「showPicker()」嗎？您的公開支持有助於 Chrome 團隊排定功能優先順序，並向其他瀏覽器供應商展現支援這些功能的重要性。

請傳送推文至 @ChromiumDev，告訴我們您在何處使用這項功能，以及使用方式。

特別銘謝

感謝 Joe Medley 審查本文。日曆圖片相片來源：Eric Rothermel，發表於 Unsplash。