如何使<input type = 「date」> 支持所有浏览器？任何替代品

问题描述

我正在使用 HTML5 元素输入属性，只有 Google Chrome 支持日期，时间属性。我试过 Modernizr，但是我不明白如何将它集成到我的网站上 (关于如何编码/语法/包含的内容) 。任何关于如何使用日期，时间属性到所有浏览器的代码片段。

最佳解决方案

任何不支持输入类型 date 的浏览器将默认为标准类型，即 text，因此您只需要检查类型属性 (而不是属性)，如果不是 date，日期输入不受支持浏览器，并添加自己的 datepicker：

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

小提琴

你当然可以使用任何你想要的日期戳，jQuery UI 的 datepicker 可能是最常用的，但是如果你没有使用 UI 库来做任何其他事情，它会添加相当多的 javascript，但是还有数百个替代的 datepicker 从中选择。

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

次佳解决方案

Modernizr 实际上并没有改变关于如何处理新的 HTML5 输入类型的任何内容。它是一个功能检测器，而不是垫片 (除了<header>，<article> 等，它被作为与<div> 类似的块元件来处理) 。

要使用<input type='date'>，您需要在自己的脚本中检查 Modernizr.inputtypes.date，如果是错误的，请打开另一个提供日期选择器的插件。你有数以千计的选择; Modernizr 维护 a non-exhaustive list of polyfills，可能会让您在某个地方开始。或者，您可以让它走 – 所有的浏览器都回到 text，当他们不能识别的输入类型，所以最糟糕的是，你的用户必须输入日期。 (你可能想给他们一个占位符，或者使用像 jQuery.maskedinput 这样的东西来保持它们的正常运行。)

第三种解决方案

你要求 Modernizr 的例子，所以在这里你去。此代码使用 Modernizr 来检测是否支持’date’ 输入类型。如果不支持，那么它将返回到 JQueryUI datepicker 。

注意：您需要下载 JQueryUI，并且可能会以自己的代码更改 CSS 和 JS 文件的路径。

<!DOCTYPE html>
<html>
    <head>
        <title>Modernizer Detect 'date' input type</title>
        <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>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
        <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();
                }
            });
        </script>
    </head>
    <body>
        <form>
            <input id="theDate" type="date"/>
        </form>
    </body>
</html>

我希望这适合你。

第四种方案

这是一个意见，但我们在 WebShims 取得了巨大的成功。如果 native 不可用，它可以干净地使用 jQuery datepicker 。 Demo here

第五种方案

   <script type="text/javascript">
      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://googleajax.admincdn.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />n')
        document.write('<script src="http://googleajax.admincdn.com/ajax/libs/jquery/1.4/jquery.min.js"></script>n')
        document.write('<script src="http://googleajax.admincdn.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>n')
      }
   </script>

 <script>
    if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
       jQuery(function($){ //on document.ready
           $('#birthday').datepicker();
       })
    }
 </script>

<body>
 <form>
   <b>Date of birth:</b>
   <input type="date" id="birthday" name="birthday" size="20" />
   <input type="button" value="Submit" name="B1"></p>
 </form>
</body>

SOURCE 1& SOURCE 2