如何使所有浏览器都支持<input type =“ date”>？还有其他选择吗？

83

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

javascript  jquery  html  jquery-ui 
— leonardeveloper
source
您正在使用Datepicker的哪种控件？也许JQuery UI会很完美？
— 塞巴斯蒂安
10
请注意，如果您还没有依赖jQueryUI，包括仅用于填充日期输入的庞大权重，则不是默认决定。
— jfmatt
— koppor

Answers:

116

任何不支持输入类型的浏览器都date将默认使用标准类型，即text，因此您要做的就是检查type属性 （不是attribute），如果date不支持，则浏览器不支持输入日期，然后添加自己的日期选择器：

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

小提琴

当然，您可以使用所需的任何日期选择器，jQuery UI的日期选择器可能是最常用的日期选择器，但是如果您不将UI库用于其他任何事情，它的确会添加很多JavaScript，但是有数百种替代日期选择器从中选择。

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

— 阿德尼奥
source
1
使用jQuery检查属性而不是使用DOM可能会更好？$('input').prop('type') != 'date'
— IMSoP 2013年
9
DOM更快，不是吗？
— reaper_unique
6
如果不支持“日期”，则输入的“类型”更改为“文本”，而属性“类型”仍为“日期”。因此，可以轻松用作选择器。我已经通过以下方式更新了小提琴：jsfiddle.net/2AaFk/34
— Michael Wyraz 2014年
2
当我检查您的小提琴时，@ MichaelWyraz似乎在Safari浏览器中不起作用。
— 瑞沙伯·赛斯
1
这对我有用，只要注意我没有所需的CSS，就可以在此线程上找到它： stackoverflow.com/a/29791769/1339326 <link rel =“ stylesheet” href =“ /// code.jquery.com /ui/1.11.2/themes/smoothness/jquery-ui.css“>
— magorich
14

实际上，Modernizr不会对如何处理新的HTML5输入类型进行任何更改。这是一个特征检测，而不是一个垫片（除<header>，<article>等等，其作为衬层块元素类似于待处理<div>）。

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

— f
source
11

您要求提供Modernizr示例，所以就到这里。此代码使用Modernizr来检测是否支持“日期”输入类型。如果不支持，则它将故障回复到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>

希望这对您有用。

— 蒂姆·S
source
请注意，对于Modernizr 3，您必须使用modernizr.com/download?inputtypes-setclasses生成配置，并按照modernizr.com/docs/#downloading-modernizr
— koppor
7 
   <script>
      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" />\n')
         document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
         document.write('<script src="http://ajax.googleapis.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();
       }); <- missing semicolon
    }
 </script>


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

来源1 和来源2

— 里塔布拉塔·高塔姆（Ritabrata Gautam）
source
2

分配给变量的Chrome版本50.0.2661.87 m不支持mm-dd-yy格式。它使用yy-mm-dd。IE和Firefox可以正常工作。

— 开尔文
source
2

我发现的最佳便捷解决方案是，在以下浏览器上工作

  1. 谷歌浏览器
  2. 火狐浏览器
  3. 微软Edge

  4. 苹果浏览器

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<h2>Poly Filler Script for Date/Time</h2>
<form method="post" action="">
    <input type="date" />
    <br/><br/>
    <input type="time" />
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

</body>
</html>
— 卡西夫·拉蒂夫（Kashif Latif）
source
0

我在使用英国dd / mm / yyyy格式时遇到了问题，最初使用了adeneo的答案https://stackoverflow.com/a/18021130/243905，但对我来说在Safari浏览器中不起作用，所以改为据我所知，整个工作-使用jquery-ui datepicker，jquery验证。

if ($('[type="date"]').prop('type') !== 'date') {
    //for reloading/displaying the ISO format back into input again
    var val = $('[type="date"]').each(function () {
        var val = $(this).val();
        if (val !== undefined && val.indexOf('-') > 0) {
            var arr = val.split('-');
            $(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
        }
    });

    //add in the datepicker
    $('[type="date"]').datepicker(datapickeroptions);

    //stops the invalid date when validated in safari
    jQuery.validator.methods["date"] = function (value, element) {
        var shortDateFormat = "dd/mm/yy";
        var res = true;
        try {
            $.datepicker.parseDate(shortDateFormat, value);
        } catch (error) {
            res = false;
        }
        return res;
    }
}
— t
source
0 
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
    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" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.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
            $('#start_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
            $('#end_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });
        })
    }
</script>
</head>
<body>
    <input name="start_date" id="start_date" type="date" required>
    <input name="end_date" id="end_date" required>
</body>
</html>
— 阿莫尔·史鲁德（Amol Shirude）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.