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


82

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

<input type=date>

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

目前,我认为只有Opera内置了日期选择器,但是对Opera的测试显然是不好的。有没有一种方法可以检测到此功能(如果可以通过便携式方式检测到)?


1
由于不同的浏览器支持不同级别的日期,因此检测日期支持非常复杂。有些提供了不错的日历日期选择器。其他人只是验证它看起来像一个日期。
rjmunro 2012年

2
就是为什么我问这个问题。我想知道浏览器是否有日期选择器,而不是它是否声称了解日期输入。它不是AFAICT的重复项,并且以下答案无济于事。我只是从来没有回过头来更新或竞争。我刚去<input class=datepicker>并始终使用jquery ui datepicker(老式方式)。
DaedalusFall 2012年

1
应该注意的是,在桌面浏览器上,日期输入UI经常有一些不足之处。即使他们支持它,您也可能不想使用它。此问题似乎并不影响移动浏览器。
rich remer

Answers:


132

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

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

但是,正如simonox在评论中提到的那样,某些浏览器(如Android普通浏览器)假装它们支持某种类型(如日期),但它们不提供用于输入日期的UI。因此,simonox使用在date字段中设置非法值的技巧改进了实现。如果浏览器清除此输入,它也可以提供日期选择器!!!

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

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

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

8
在Android浏览器的股票不能正常工作,它返回true,但不具有日期选择器支持
比约恩·安德森

33
要求type属性并非在所有Android股票浏览器中都有效。他们假装他们支持inputType = date,但是他们不提供用于输入日期的UI。这种功能检测对我有用:function(){var el = document.createElement('input'),notADateValue ='not-a-date'; el.setAttribute('type','date'); el.setAttribute('value',notADateValue); return!(el.value === notADateValue); 技巧是在日期字段中设置非法值。如果浏览器清除此输入,它也可以提供日期选择器。
simonox

@simonox:一个非常好的解决方案。感谢您的
巴特洛梅耶扎莱夫斯基

3
您是说'!==='='!=='吗?:)
Matty Balaam

1
@MattyBalaam显然,这是语法错误。我固定它:)
尼卡比曹
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.