2012-04-17 57 views
63

可能重复:
HTML5 Type Detection and Plugin Initialization如何判断如果一个浏览器支持<INPUT TYPE = '日期'>

<input type=date> 

应该创建具有一个输入(可选)用户代理提供了datepicker,但尚未得到广泛支持,所以我们使用的是jQuery UI Datepicker。我们如何才能允许浏览器使用他们自己的日期选择器,并且只有在浏览器没有这样的事情时才回退到jQuery UI?

目前我认为只有Opera内置了datepicker,但对Opera的测试显然是不好的。有没有办法检测到这个功能(如果它可以以便携的方式进行)?

感谢

+0

检测日期的支持很复杂,因为不同的浏览器支持不同级别的日期。一些提供了一个不错的日历日期选择器。其他人只是验证它看起来像一个日期。 – rjmunro 2012-09-14 10:09:41

+1

正是我问这个问题的原因。我想知道浏览器是否有日期选择器,而不是它是否理解日期输入。这不是AFAICT的重复,下面的答案没有帮助。我从来没有想过要更新或竞争。我只是用''去了,并总是使用jquery ui datepicker(老式的方式)。 – DaedalusFall 2012-10-11 12:45:53

+1

在桌面浏览器上应该注意日期输入用户界面通常会留下一些需要的东西。即使他们支持它,你也可能不想使用它。这个问题似乎并不影响移动浏览器。 – 2016-01-06 18:29:03

回答

101

的方法波纹管检查,如果一些输入类型是大多数浏览器的支持:

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); 
} 
+8

在Android股票浏览器中不起作用,它将返回true,但不支持datepicker – 2013-03-11 14:24:33

+30

要求type属性不适用于所有Android股票浏览器。他们假装他们支持inputType = date,但他们不提供日期输入的UI。 此功能检测为我工作: 函数(){ VAR EL =使用document.createElement( '输入'), notADateValue = '不-A-日期'; el.setAttribute('type','date'); el.setAttribute('value',notADateValue); return!(el.value === notADateValue); } 诀窍是将一个非法值设置为日期字段。如果浏览器清理这个输入,它也可以提供日期选择器。 – simonox 2013-10-09 14:15:08

+0

@simonox:一个非常好的解决方案。感谢那 – 2014-01-07 08:49:23

相关问题