jquery-ui中的datapicker的跨浏览器判断

Posted 2022-12-05

原来发现在chrom，opera等新的版本中，有了type=date类型的日期输入框，
如下图，IE和FIREFOX不行
[img]

​​​http://d2o0t5hpnwv4c1.cloudfront.net/985_datepicker/browser-support.png ​​​[/img]

那么，可以使用jquery-ui的datapicker依然去做相关的日期控件效果，代码如下：

<link href="css/redmond/jquery-ui-1.8.13.custom.css" rel="stylesheet" />


<input type="date" name="date" id="date" value="" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<script src="js/jquery-ui.js"></script>

<script>

 (function() 

 var elem = document.createElement(input);

 elem.setAttribute(type, date);


 if ( elem.type === text ) 

 $(#date).datepicker(

 dateFormat: yy-mm-dd,

 // defaultDate: +5

 maxDate : +3

 ); 

 

 )();


</script>

这里，为了跟各浏览器兼容，还是在这里先设置了<input type="date" name="date" id="date" value="" />
然后在JQUERY中，

var elem = document.createElement(input);

 elem.setAttribute(type, date);

对这个文本框去设置属性，如果能不能设置成功（证明是非支持日期框的浏览器），
然后则可以使用jquery-ui中的日期选择控见了。
以上的这个思路，还是适合于跨浏览器中的一些判断和设置的。