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

弗朗索瓦·博福
François Beaufort
GitHub

长期以来，您不得不借助自定义 widget 库或技巧来显示日期选择器。Web 平台现在附带 HTMLInputElement showPicker() 方法，这是一种不仅能显示日期以及时间、颜色和文件的浏览器选择器的规范方式。

背景

我们经常收到来自 Web 开发者的请求：

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

Stack Overflow

目前的答案并不是很好；它们依赖于外部库、CSS 技巧或特定的浏览器行为（例如模拟用户与 click() 的互动）。

我很高兴地告诉您，当 Web 平台推出一种规范方法，可以为以下类型的 <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() 还不熟悉 Web 平台。该功能将来可能需要您执行额外的操作：

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

反馈

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

请告诉我们设计情况

“showPicker()”中是否存在您预期之外的问题？或者，是否缺少实现您的想法所需的方法或属性？ 对安全模型有疑问或意见？

实施时遇到了问题？

您是否发现了 Chrome 实现方面的错误？或者，实现方式是否不同于规范？

  • 请在 https://new.crbug.com 上提交 bug。请务必提供尽可能详细的信息，以及简单的重现说明。Glitch 非常适合用于快速轻松地重现错误。

显示支持

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

请向 @ChromiumDev 发送 Twitter 微博，告诉我们您在哪里以及如何使用它。

致谢

感谢 Joe Medley 查看本文。 日历图片，由 Eric Rothermel 提供，由 Unsplash 提供。