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

François Beaufort
François Beaufort
GitHub

很长一段时间以来，您必须依赖自定义 widget 库或黑客技术才能显示日期选择器。网络平台现在附带 HTMLInputElement showPicker() 方法，这是一种规范的方式，不仅可以显示日期，还可以显示时间、颜色和文件的浏览器选择器。

背景

我们经常会收到网页开发者的常见请求：

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

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 实现中的 bug？还是实现与规范不同？

  • 请访问 https://new.crbug.com 提交 bug。请务必提供尽可能详细的信息，并附上简单的重现说明。Glitch 非常适合分享快速简便的重现步骤。

表达支持

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

向 @ChromiumDev 发推文，告诉我们您在哪里以及如何使用它。

致谢

感谢 Joe Medley 审核本文。 日历图片由 Unsplash 用户 Eric Rothermel 拍摄。