检查浏览器是否支持HTML5时间选择器

Question

我在JavaScript中创建了一个时间掩码，适用于PC、Mac、iPhone和iPad。但是，在大多数Android手机上无法始终正常工作（我不想详细说明为什么这种功能在Android上无法始终正常工作），因此我将其禁用。对于三星手机，内置的HTML5时间选择器效果很好。

对于Android手机，当原生浏览器时间选择器可用时（例如现代三星手机），我希望利用HTML5时间选择器。

我知道我可以检测浏览器是否支持日期/时间输入类型，但这并不一定表示浏览器支持时间选择器（例如HTC EVO 3D）。这个问题（Detect browser's native date/time pickers）表明如果支持时间类型，则浏览器已实现时间选择器，但这是错误的。

我知道modernizr，但我没有看到实际验证浏览器是否支持时间选择器的方法。

因此，在此背景信息下，有人知道确定浏览器是否实现时间选择器的方法吗？

- SemanticZen

---

你是什么意思，"实际验证浏览器是否支持时间选择器"？这正是现代化的做法。 - Cerbrus

实际上需要验证浏览器是否支持时间选择器，不仅仅是支持<input type='time'>，而且当用户单击<input type='time'>字段时，它会弹出一个时间选择器控件。 - SemanticZen

@Cerbrus 哦，我明白了，有趣的是，Chrome没有返回值 Fiddle - Rik

@Rik：我明白了，是的。嗯，那就是一个浏览器，你可以在那里检查它。 - Cerbrus

只是一个疯狂的想法：根据这个 ，没有办法访问<input type="date">内部的影子DOM元素。但如果可能的话，您可以测试元素的内部工作方式以检查是否有日期选择器。此外，我尝试使用供应商前缀的伪元素，例如-webkit-calendar-picker-indicator来解决它，但没有成功。希望能有所帮助。 - rvidal

Answer 1

我认为最安全的做法是假设浏览器不支持<input type="date">。截至今天（2016年初），日期选择器的实际用户界面在各个浏览器上仍然非常不一致。除非你正在开发一个非常具体的浏览器子集，否则你仍然需要一些JavaScript。

参考资料：

• http://html5doctor.com/the-woes-of-date-input
• http://caniuse.com/#feat=input-datetime

- rvidal

---

这基本上就是我所做的。我在iOS设备上使用type="date"，并在所有其他设备上使用jQuery datapicker。 - SemanticZen

Answer 2

你最好的选择是假设支持 <input type="date"> 的浏览器也已经为其实现了时间选择器。
（据我所知，这是事实，如果没有合理的输入日期的方式，支持 type="date" 有什么意义呢？）

这是因为没有办法检查浏览器是否实际显示时间选择器。除了使用 modernizr 检查之外，你真的无能为力。

- Cerbrus

---

很遗憾，这是一个错误的假设。 - SemanticZen

那么，有些浏览器即使支持“日期”输入，也没有时间选择器？恐怕你真的别无选择，只能相信浏览器。 - Cerbrus

不幸的是，情况确实如此。因此，选项似乎是：1. 假设所有Android手机都不支持时间选择器；或者2. 检测每个支持时间选择器的手机/运营商的Android设备（通过用户代理）... 这两个选项都不太好。 - SemanticZen

我很抱歉，这可能不是你想要的答案，但你能否将其标记为答案呢？（有时候，“不行，这是不可能的”确实是正确的答案。） - Cerbrus

如果没有更好的答案出现，这将不幸成为“最佳”答案，我会标记它。让我们等几天... 希望永存。 - SemanticZen