如何制作<输入类型＝“;日期“>所有浏览器都支持吗?任何替代方案

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

本文关键字：支持 浏览器 任何替 方案 gt 输入 lt 何制作 类型 日期      更新时间：2023-09-26

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

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

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

FIDDLE

当然，你可以使用任何你想要的日期选择器，jQuery UI的日期选择器可能是最常用的一个，但如果你不使用UI库做任何其他事情，它确实添加了很多javascript，但有数百种替代日期选择器可供选择。

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

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

要使用<input type='date'>，您需要在自己的脚本中检查Modernizr.inputtypes.date，如果为false，请打开另一个提供日期选择器的插件。你有成千上万的选择；Modernizr维护了一个非详尽的polyfill列表，这可能会给你一个起点。或者，你可以顺其自然——当出现他们不认识的输入类型时，所有浏览器都会回到text，所以最糟糕的情况是你的用户必须输入日期。（您可能想给它们一个占位符，或者使用类似jQuery.maskedinput的东西来保持它们的正常运行。）

您要求提供Modernizr示例，现在开始。此代码使用Modernizr来检测是否支持"日期"输入类型。如果不支持它，那么它将失败返回JQueryUI日期选择器。

注意：您需要下载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>

我希望这对你有用。

   <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

这是一篇观点文章，但我们在WebShims方面取得了巨大成功。如果本机不可用，那么使用jQuery日期选择器可以干净地衰减。此处演示

只需在<head>部分中使用<script src="modernizr.js"></script>，脚本就会添加一些类来帮助您区分这两种情况：当前浏览器是否支持它。

另外，请关注此帖子中发布的链接。它将帮助您：HTML5输入类型日期、颜色、范围在Firefox和Internet Explorer 中的支持

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

我找到的最好的简单可行的解决方案是，在以下浏览器上工作

  1. 谷歌Chrome
  2. Firefox
  3. Microsoft Edge

  4. Safari

    <!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>

两个脚本包含解决方案（2019）：

只需在脚本部分包含Better Dom和Better Dateinput Polyfill即可。

这是一个演示：
http://chemerisuk.github.io/better-dateinput-polyfill/

我在维护英国dd/mm/yyyy格式时遇到了问题，我最初使用了adeneo的答案https://stackoverflow.com/a/18021130/243905但对我来说，这在safari中不起作用，所以改成了这个，据我所知，它在所有方面都起作用——使用jquery ui日期选择器，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;
    }
}

<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>
相关文章：