显示日期、时间、颜色和文件的浏览器选择器

François Beaufort
François Beaufort
GitHub

很长一段时间以来，您都必须借助自定义 widget 库或 hack 来显示日期选择器。Web 平台现在随附 HTMLInputElement showPicker() 方法，这是显示浏览器选择器的规范方式，不仅适用于日期，还适用于时间、颜色和文件。

背景

我们经常收到 Web 开发者提出的请求：

如何以编程方式
显示日期等控件的选择器？

Stack Overflow

目前的解决方案并不理想；它们依赖于外部库、CSS hack 或特定的浏览器行为，例如模拟用户与 click() 的互动。

很高兴地告诉大家，这种情况很快就会结束，因为 Web 平台即将推出一种规范的方式来显示类型为 "date"、"month"、"week"、"time"、"datetime-local"、"color" 和 "file" 的 <input> 元素的浏览器选择器。它还适用于由 <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://cdpn.io/web-dot-dev/fullpage/LEVKVdr 体验浏览器支持的所有选择器。

浏览器支持

showPicker() 适用于 Chrome 99 或更高版本。

后续步骤

在撰写本文时，showPicker() 是 Web 平台的新功能。此功能将来可能需要进行更多工作：

  • 如果 Web 开发者提出要求，我们未来可能会向 <select> 元素添加类似的 showPicker()。
  • closePicker() 可能很有用，如果 Web 开发者要求添加，我们可以考虑添加。
  • 我们可以添加一项权限政策，允许跨源 iframe 在其父链允许的情况下显示浏览器选择器。

反馈

Chrome 团队和 Web 标准社区希望了解您使用 showPicker() 的体验。

介绍一下设计

showPicker() 是否有某些方面未按您的预期运行？或者，是否有缺少的方法或属性需要您来实现自己的想法？ 对安全模型有疑问或意见？

实现存在问题？

您是否发现 Chrome 的实现存在 bug？还是实现与规范不同？

  • 请访问 https://new.crbug.com 提交 bug。请务必尽可能详细地说明问题，并提供简单的重现说明。

显示支持

您是否打算使用 showPicker()？您的公开支持有助于 Chrome 团队确定功能的优先级，并向其他浏览器供应商展示支持这些功能的重要性。

请向 @ChromiumDev 发送推文，告诉我们您在何处以及如何使用该功能。

致谢

感谢 Joe Medley 审阅本文。 日历图片照片由 Eric Rothermel 拍摄，选自 Unsplash 网站。