How to make <input type=“date”> supported on all browsers? Any alternatives?
我正在使用HTML5元素输入属性,只有Google Chrome支持日期,时间属性。我尝试过Modernizr,但不了解如何将其集成到我的网站上(如何编码/语法/包含什么)。有关如何使用所有浏览器的日期和时间属性的任何代码段。
任何不支持输入类型
1 2 3 | if ( $('[type="date"]').prop('type') != 'date' ) { $('[type="date"]').datepicker(); } |
FIDDLE
您当然可以使用所需的任何日期选择器,jQuery UI的日期选择器可能是最常用的日期选择器,但是如果您不使用UI库进行其他任何操作,它的确会添加很多JavaScript,但是有数百种可供选择的替代日期选择器。
如上例所示,该属性仍可以用作选择器。
Modernizr实际上并未更改有关如何处理新HTML5输入类型的任何内容。它是一个特征检测器,而不是填充程序(
要使用
您询问了Modernizr示例,所以在这里。此代码使用Modernizr来检测是否支持"日期"输入类型。如果不支持,则它将故障恢复到JQueryUI datepicker。
注意:您将需要下载JQueryUI并可能以自己的代码更改CSS和JS文件的路径。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> Modernizer Detect 'date' input type <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"> <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"> <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"> <script type="text/javascript"> $(function(){ if(!Modernizr.inputtypes.date) { console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead."); $("#theDate").datepicker(); } }); </head> <body> <form> <input id="theDate" type="date"/> </form> </body> </html> |
我希望这对您有用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var datefield = document.createElement("input") datefield.setAttribute("type","date") if (datefield.type !="date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\ ') document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\\/script>\ ') document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\\/script>\ ') } if (datefield.type !="date") { // if browser doesn't support input type="date", initialize date picker widget: jQuery(function($) { // on document.ready $('#birthday').datepicker(); }); <- missing semicolon } |
1 2 3 4 5 6 7 | <body> <form> Date of birth: <input type="date" id="birthday" name="birthday" size="20"> <input type="button" value="Submit" name="B1"> </form> </body> |
来源1
这是一个观点,但WebShims取得了巨大的成功。如果没有可用的本机,使用jQuery datepicker可以干净利落。此处演示
只需在
加号关注此主题中发布的链接。它将为您提供帮助:HTML5输入类型的日期,颜色,Firefox和Internet Explorer中的范围支持
n
n
n
n
n