如何判断浏览器是否支持<input type='date'>？

Question

可能是重复问题:
HTML5类型检测和插件初始化

<input type=date>

我们希望创建一个具有（可选）用户代理提供的日期选择器的输入框，但是该功能目前还没有广泛支持，因此我们使用了jQuery UI日期选择器。如何让浏览器使用自己的日期选择器，并仅在浏览器没有这样的功能时回退到jQuery UI？

目前我认为只有Opera浏览器内置了日期选择器，但测试Opera显然不是一个好办法。是否有一种方法可以以便携方式检测此功能（如果有的话）？

- DaedalusFall

---

检测日期支持是很复杂的，因为不同的浏览器对日期的支持程度不同。有些浏览器提供了漂亮的日历日期选择器，而其他浏览器只验证它看起来像一个日期。 - rjmunro

我之所以提出这个问题，是因为我想知道浏览器是否有日期选择器，而不是它是否声称理解日期输入。据我所知，这不是重复的问题，下面的答案也没有帮助。我只是一直没有更新或争论。我只使用<input class=datepicker>并始终使用jquery ui datepicker（老式方法）。 - DaedalusFall

需要注意的是，在桌面浏览器上，日期输入界面通常不太理想。即使它们支持它，您也可能不想使用它。这个问题似乎不会影响移动浏览器。 - rich remer

Answer 1

以下方法检查大多数浏览器是否支持某些输入类型：

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

不过，正如simonox在评论中提到的那样，某些浏览器（例如Android原生浏览器）会假装支持某些类型（例如日期），但它们没有为日期输入提供用户界面。所以simonox采用了将非法值设置到日期字段的技巧来改进实现。如果浏览器对此输入进行清理，则可能会提供一个日期选择器！！！

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

- Italo Borssatto

---

不适用于安卓原生浏览器，返回true但不支持日期选择器。 - Björn Andersson

在所有Android原生浏览器中，请求type属性并不能起作用。它们声称支持inputType=date，但是却没有提供日期输入的用户界面。以下特征检测方法适用于我：function() { var el = document.createElement('input'), notADateValue = 'not-a-date'; el.setAttribute('type', 'date'); el.setAttribute('value', notADateValue); return !(el.value === notADateValue); }这个技巧就是在日期字段中设置一个非法值。如果浏览器对此进行了清理，那么它也可能会提供一个日期选择器。 - simonox

你可以在第一个例子中将比较紧缩为严格相等。input.type是一个字符串。 - Michael Cordingley

你也可以使用Modernizr来检测此功能，使用以下代码片段 if(Modernizr.inputtypes.week) //ok the browser support this!。 - JoDev

这很棒。另一个需要注意的是，使用日期输入时，你设置和获取的日期格式为年-月-日（yyyy-mm-dd），而它将以你的语言环境格式显示。如果没有这个功能，当设置现有值时，你需要将日期格式化为本地语言环境，并在进行数据库存储或处理时进行转换。 - james-geldart