長期以來,您必須自訂小工具程式庫或小程式,才能顯示日期挑選器。網路平台現在提供 HTMLInputElement showPicker()
方法,可用於顯示瀏覽器挑選器,不僅可用於顯示日期,還能同時顯示時間、顏色和檔案。
背景
網頁開發人員提出的常見要求如下:
如何透過程式輔助方式
Stack Overflow
顯示日期等控制項的挑選器?
目前的解答並不完善,因此仰賴外部程式庫、CSS 駭客攻擊或特定瀏覽器行為 (例如模擬使用者與 click()
的互動)。
很高興在此宣布,網路平台導入標準方法,可顯示下列類型的 <input>
元素瀏覽器挑選器:"date"
、"month"
、"week"
、"time"
、"datetime-local"
、"color"
和 "file"
。它也適用於根據 <datalist>
或 "autocomplete"
提供的建議 <input>
元素,我們會在本文中一併說明。
如何顯示挑選器
對 <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()
」有什麼功能不如預期嗎?或者,是否缺少實作構想所需的方法或屬性?對安全模型有任何疑問或意見嗎?
- 在 WHATWG GitHub 存放區中提出規格問題,或是將您的想法加入現有問題中。
執行時遇到問題嗎?
您在導入 Chrome 時發現錯誤嗎?還是實作方式與規格不同?
- 前往 https://new.crbug.com 回報錯誤。請務必盡可能提供詳盡的資料,以及簡易的重現操作說明。Glitch 適合用於分享快速又簡單的提交內容,
顯示支援服務
您打算使用「showPicker()
」嗎?您的公開支援團隊可協助 Chrome 團隊決定各項功能的優先順序,並向其他瀏覽器供應商顯示支援的功能。
請發文至 @ChromiumDev,讓我們知道您的位置和使用方式。
實用連結
特別銘謝
感謝 Joe Medley 閱讀這篇文章。 Eric Rothermel 為 Unsplash 提供的日曆相片。