关于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