关于javascript:如何使<input type =” date”>在所有浏览器中受支持?还有其他选择吗?

How to make <input type=“date”> supported on all browsers? Any alternatives?

我正在使用HTML5元素输入属性,只有Google Chrome支持日期,时间属性。我尝试过Modernizr,但不了解如何将其集成到我的网站上(如何编码/语法/包含什么)。有关如何使用所有浏览器的日期和时间属性的任何代码段。


任何不支持输入类型date的浏览器都将默认为标准类型,即text,因此您要做的就是检查type属性(不是属性)(如果不是,浏览器不支持输入日期,您可以添加自己的日期选择器:

1
2
3
if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

FIDDLE

您当然可以使用所需的任何日期选择器,jQuery UI的日期选择器可能是最常用的日期选择器,但是如果您不使用UI库进行其他任何操作,它的确会添加很多JavaScript,但是有数百种可供选择的替代日期选择器。

type属性从不更改,浏览器将仅回退到该属性的默认text类型,因此必须检查该属性。
如上例所示,该属性仍可以用作选择器。


Modernizr实际上并未更改有关如何处理新HTML5输入类型的任何内容。它是一个特征检测器,而不是填充程序(<header>等除外,将其填充为类似于的块元素)。

要使用<input type='date'>,您需要在自己的脚本中检查Modernizr.inputtypes.date,如果它为假,请打开另一个提供日期选择器的插件。您有数千种可供选择; Modernizr维护的Polyfill列表并不详尽,可能会给您一些起点。另外,您也可以放任不管-当所有浏览器出现无法识别的输入类型时,它们都会退回到text,因此,最糟糕的情况是用户必须输入日期。 (您可能想给它们一个占位符,或使用类似jQuery.maskedinput的方法使它们保持在正轨。)


您询问了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可以干净利落。此处演示


只需在<head>部分中使用<script src="modernizr.js">,该脚本将添加有助于您区分这两种情况的类:当前浏览器是否支持这两种情况。

加号关注此主题中发布的链接。它将为您提供帮助:HTML5输入类型的日期,颜色,Firefox和Internet Explorer中的范围支持


n


n


n


n


n