如何以编程方式在移动设备上调用本机日期选择器

Posted 2023-05-07

【中文标题】如何以编程方式在移动设备上调用本机日期选择器

【英文标题】：How to programmatically invoke the native datepicker on a mobile device

【发布时间】：2014-07-22 17:15:37

【问题描述】：

我想以编程方式在我的网页上启动本机日期选择器（在 ios 和 android 上运行）。我知道我可以使用<input type="date"，但这需要用户输入。

如何以编程方式启动它？

【问题讨论】：

也许尝试在输入上触发焦点事件？

@BrianGlaz 不，它不会填充日历。

@RahilWazir 是的，这是我尝试的第一件事。我还尝试以编程方式触发点击事件。

【参考方案1】：

你没有。

如果没有用户触摸date 输入，您无法告诉（/强制）手机显示日期选择器。

这是一件好事，因为（至少在 iOS 上）本机日期选择器将正常的浏览器控件隐藏在屏幕底部。

【讨论】：

没有得到我想要的，但它给了我答案。我猜，回到自定义构建的日期选择器 :(

仍然，感谢您接受我的回答。祝你的尝试好运:-)

【参考方案2】：

你可以，

但它需要用户的任何输入，例如触摸/点击事件。从那里您可以使用yourdateinput.click() 或yourdateinput.focus()。第一个适用于android，最后一个适用于iOS。

【讨论】：

感谢您的回答

【参考方案3】：

Web 平台现在附带 htmlInputElement showPicker() 方法，这是一种显示浏览器选择器的规范方式，不仅可以显示日期，还可以显示时间、颜色和文件。在撰写本文时，showPicker() 在 Chrome 99 或更高版本中可用。

在元素上调用 showPicker() 会向用户显示浏览器选择器。必须调用它以响应用户手势，例如触摸手势或鼠标点击；否则它将因 NotAllowedError 异常而失败。出于安全考虑，在跨域 iframe 中调用时会抛出 SecurityError 异常。

当元素是以下类型之一时，将显示浏览器选择器：“日期”、“月”、“周”、“时间”、“本地日期时间”、“颜色”或“文件”。

以下示例向您展示如何打开浏览器日期选择器。

<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> 或“自动完成”的项目。

见https://developer.chrome.com/blog/show-picker/和https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker