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

【问题标题】：How can I tell if a browser supports <input type='date'>如何判断浏览器是否支持 <input type='date'>
【发布时间】：2012-04-28 21:56:47
【问题描述】：

可能重复：
HTML5 Type Detection and Plugin Initialization

<input type=date>

应该使用（可选）用户代理提供的日期选择器创建输入，但它尚未得到广泛支持，因此我们使用 jQuery UI 日期选择器。我们怎样才能允许浏览器使用他们自己的日期选择器，并且只有在浏览器没有这样的东西时才使用 jQuery UI？

目前我认为只有 Opera 有内置的日期选择器，但对 Opera 的测试显然会很糟糕。有没有办法可以检测到这个功能（如果它可以以便携的方式进行的话）？

【问题讨论】：

检测日期支持很复杂，因为不同的浏览器支持不同级别的日期。有些提供了一个不错的日历日期选择器。其他人只是验证它看起来像一个日期。
正是我问这个问题的原因。我想知道浏览器是否有日期选择器，而不是它是否声称理解日期输入。它不是 AFAICT 的副本，下面的答案也无济于事。我只是从来没有轮到更新或竞争。我刚刚选择了<input class=datepicker>，并且总是使用 jquery ui datepicker（老式方式）。
应该注意的是，在桌面浏览器上，日期输入 UI 通常会留下一些不足之处。即使他们支持它，您也可能不想使用它。此问题似乎不会影响移动浏览器。

标签： javascript html

【解决方案1】：

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

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

但是，正如 cmets 中提到的 simonox，一些浏览器（作为 Android 股票浏览器）假装它们支持某种类型（如日期），但它们不提供用于日期输入的 UI。所以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);
}

【讨论】：

在android股票浏览器中不起作用，它返回true但不支持datepicker
要求 type 属性不适用于所有 Android 库存浏览器。他们假装他们支持 inputType=date，但他们不提供用于日期输入的 UI。此功能检测对我有用： function() { var el = document.createElement('input'), notADateValue = 'not-a-date'; el.setAttribute('类型','日期'); el.setAttribute('value', notADateValue); return !(el.value === notADateValue);诀窍是在日期字段中设置非法值。如果浏览器清理了这个输入，它也可以提供一个日期选择器。
您可以将第一个示例中的比较加强为严格相等。 input.type 是一个字符串。
你也可以使用Modernizr通过这个sn-p检测这个功能if(Modernizr.inputtypes.week) //ok the browser support this!
这很棒。另一个问题是，使用您设置的日期输入并将日期检索为 yyyy-mm-dd，它将以您的语言环境格式显示。如果没有这个，您需要在设置现有值时将日期格式化为区域设置，并将其转换回用于数据库存储或处理