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

IT技术 javascript html
2021-03-15 12:37:08

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

<input type=date>

应该使用(可选)用户代理提供的日期选择器创建输入,但它尚未得到广泛支持,因此我们使用 jQuery UI 日期选择器。我们如何才能允许浏览器使用自己的日期选择器并仅在浏览器没有这样的东西时才使用 jQuery UI?

目前我认为只有 Opera 有内置的日期选择器,但对 Opera 的测试显然很糟糕。有没有办法检测到这个功能(如果它可以以便携的方式)?

1个回答

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

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

但是,正如评论中提到的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);
}
要求 type 属性不适用于所有 Android Stock 浏览器。他们假装 htat 支持 inputType=date,但他们不提供用于日期输入的 UI。此功能检测对我有用: function() { var el = document.createElement('input'), notADateValue = 'not-a-date'; el.setAttribute('类型','日期'); el.setAttribute('value', notADateValue); 返回 !(el.value === notADateValue); 诀窍是在日期字段中设置非法值。如果浏览器清理了这个输入,它也可以提供一个日期选择器。
2021-04-18 12:37:08
在android股票浏览器中不起作用,它返回true但不支持datepicker
2021-04-23 12:37:08
这很棒。另一个问题是,使用日期输入设置并检索日期为 yyyy-mm-dd,它将以您的语言环境格式显示它。如果没有这个,您需要在设置现有值时将日期格式化为区域设置,并将其转换回数据库存储或处理
2021-04-25 12:37:08
你的意思是 '!===' = '!==' 吗?:)
2021-05-10 12:37:08
@MattyBalaam 显然这是一个语法错误。我修好了它 :)
2021-05-10 12:37:08