如何让 HTML 5 输入 type="date" 在 Firefox 和/或 IE 10 中工作答案

【问题标题】：How to get HTML 5 input type="date" working in Firefox and/or IE 10如何让 HTML 5 输入 type="date" 在 Firefox 和/或 IE 10 中工作
【发布时间】：2014-05-23 20:42:54
【问题描述】：

我觉得奇怪的是 input type="date" 在这么久之后仍然不受 Firefox 支持。事实上，我不认为他们在输入元素上添加了太多（如果有的话）HTML 5 新类型。 IE10 不支持它并不奇怪。所以，我的问题是……

如何让type="date" 在input 元素上正常工作，而无需添加另一个.js 文件（即jQueryUI DatePicker 小部件），只为获取IE 和Firefox 浏览器的日历/日期？有没有什么东西可以应用在某个地方（也许是 CDN？），这将使这个功能在 Firefox 和/或 IE 浏览器中默认工作？尝试针对 IE 8+ 浏览器和 Firefox，没关系，最新版本 (28.0) 就可以了。

更新：Firefox 57+ 支持输入类型=日期

【问题讨论】：

Firefox 仍然不支持这一点对我来说似乎很荒谬。我今天从 Chrome 切换到了 Firefox，只用了一天/一周来看看这些天是什么，这让我立刻想要切换回来！
这是一个笑话 FF 不吃日期
这就是为什么当人们说 Firefox 是最好的浏览器时我感到不安的原因。
虽然不是 polyfill，但我最终还是使用了 pickaday，这是一个没有 jquery 或其他依赖项的普通 js 库...
似乎在 Firefox 57 中默认工作。仍然！

标签： html forms jquery-ui internet-explorer firefox

【解决方案1】：

您可以尝试webshims，它在cdn 上可用 + 仅在需要时加载 polyfill。

这是一个使用 CDN 的演示： http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

如果默认配置不满足，有many ways to configure就可以了。在这里你可以找到datepicker configurator。

注意：虽然未来可能会有针对 webshim 的新错误修复版本。不会再有任何主要版本了。这包括对 jQuery 3.0 或任何新功能的支持。

【讨论】：

这是一个不错的解决方案，配置丰富，但是我找不到像“YYYY/MM/DD”这样的日期格式
当我尝试在 IE 11 中运行此 jsfiddle 时出现“访问被拒绝”错误，并且日期选择器不起作用。
这在 IE10 上不起作用...我遇到了与@Shavais 提到的相同的错误...要使其正常工作，请将 jquery 版本升级到 1.11 或更高版本..试试这个link
不幸的是，webshims 对即将推出的 Jquery 3 的支持将不会完成，正如作者网站上所告知的那样。既然如此，我将依赖于好的和旧的 Jquery UI。
这绝对适用于 Firefox。但在 IE 中不起作用

【解决方案2】：

自 Firefox 51 版（2017 年 1 月 26 日）起，它就在 Firefox 中，但它默认没有激活（还）

激活它：

关于：配置

dom.forms.datetime -> 设置为 true

https://developer.mozilla.org/en-US/Firefox/Experimental_features

【讨论】：

很高兴听到这个消息。 imo 应该默认开启。但这很高兴知道。
我使用的是 FF 64.0.2，但即使此选项为“true”（打开）它也不起作用，日期时间框仍然只是文本。我尝试启用“时间选择器”也没有成功。

【解决方案3】：

使用 jQuery 提供的datePicker 组件有一个简单的方法可以摆脱这个限制。

包括 jQuery 和 jQuery UI 库（我还在用旧的）
- src="js/jquery-1.7.2.js"
- src="js/jquery-ui-1.7.2.js"

使用下面的截图

$(function() {
     $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
});

如果需要，请参阅jQuery UI DatePicker - Change Date Format。

【讨论】：

OP 说“在不添加另一个 .js 文件（即 jQueryUI DatePicker 小部件）的情况下工作”......但这个问题是谷歌的热门问题，所以你的回答确实非常有帮助，尽管它没有不回答问题。我希望我现在不必为支持您的帖子而感到难过。
您还需要包含 jQuery UI CSS 才能正确显示日历。

【解决方案4】：

此时 type="date" 并不是一个实际的规范。这是 Google 提出的概念，在他们的 whatwg 规范中（非官方），Chrome 仅部分支持。

http://caniuse.com/#search=date

此时我不会依赖这种输入类型。拥有它会很好，但我没有预见到这个会真正做到。 #1 的原因是它给浏览器带来了太多负担，无法为有点复杂的输入确定最佳 UI。从响应式的角度想一想，供应商如何知道什么最适合您的 UI，比如 400 像素、800 像素和 1200 像素宽？

【讨论】：

我不同意，浏览器应该足够聪明才能解决这个问题。我真的厌倦了使用那里的日期选择器并且不得不不断更新它们。
奇怪的推理。浏览器的负担太大，但对于 joe web 开发者来说却不是？！？
现在是 HTML 5 工作草案的一部分：w3.org/html/wg/drafts/html/master/…
我也为每一种新的输入类型感到高兴。它们的定义更好，而且是原生的，这通常意味着快速。
@MM 谢谢。与此同时，HTML 5 已升级为 W3C 官方推荐标准。新链接是w3.org/TR/2014/REC-html5-20141028/…

【解决方案5】：

这是一个完整的示例，日期格式为 YYYY-MM-DD

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />

【讨论】：

有谁知道这是否允许添加时间选择器的选项？
我在 JSFiddle @Drooh 中尝试了你的脚本，但它不起作用。每次我选择一个日期时，它都会在输入字段中出现一毫秒，然后消失。有人可以提供一个日期配置为 dd/mm/yyyy 的工作小提琴版本吗？
注意，截至 2016 年 8 月，webshim 不适用于 jQuery 3，在我的测试中它也不适用于 2.2.4。
我发现这是最好的解决方案，直到 Firefox 添加日期输入 stackoverflow.com/questions/2528706/…

【解决方案6】：

虽然这不允许您获得 datepicker ui，但 Mozilla 确实允许使用模式，因此您至少可以通过以下方式获得日期验证：

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

最终我同意 @SuperUberDuper 的观点，因为 Mozilla 在本机包含此内容方面远远落后。

【讨论】：

“时间”有版本吗？
请扩展这个例子。这是输入的 html 属性吗？

【解决方案7】：

这只是根据 Dax 的回答提出的建议。（我会把它放在那个答案的评论中，但我还没有足够的声誉来评论其他问题）。

每个字段的 ID 应该是唯一的，因此，如果您的表单（或多个表单）中有多个日期字段，则可以使用 class 元素而不是 ID：

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

您的输入为：

 <input type="text" class="datepicker" name="your-name" />

现在，每次您需要日期选择器时，只需添加该类即可。 PS 我知道，你仍然必须使用 js :(，但至少你已经为你的所有网站设置好了。我的 2 美分...

【讨论】：

【解决方案8】：

firefox最新版本firefox 57(Quantum)支持2017年11月14日发布的日期和其他功能。您可以点击this link下载

【讨论】：

【解决方案9】：

有时您不想在项目中使用 Datepicker http://jqueryui.com/datepicker/，因为：

你不想使用 jquery
项目中的 jquery 版本冲突
年度选择不方便。例如，您需要在上一个按钮上点击 120 次才能移动到 10 年前。

请参阅我非常简单的跨浏览器代码以进行日期输入。我的代码仅在您的浏览器不支持日期类型输入时适用

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

【讨论】：

此代码完全失败。我无法输入日期，因为该字段已经填充了“YYY-MM-DD”，如果我尝试清除它，它会重新出现。
请不要删除连字符。我已在 Windows 10 Google Chrome 52、Firefox 41、Opera 39、Microsoft Edge、IE 11 中成功测试。请告诉我您的设备、操作系统和浏览器。
我实际上只是点击了您评论下方的“运行代码片段”链接。我无法正确输入日期，因为“YYYY-MM-DD”占位符正在积极地与我竞争，而不是在我开始输入时消失。我在 Windows 10 上使用最新的 Firefox。
不回答问题，因为违反了不添加外部JS文件的条件，实际上代码本身使用起来完全不直观。强制人们使用 ISO 格式，即使它不是他们的本机日期格式，无法在输入掩码重新出现时输入新日期，不能过度输入输入掩码，因为它不是掩码而是框中的实际文本，必须将掩码删除为你打字。无论如何都不比带有正则表达式验证的标准输入更好

【解决方案10】：

您可以在任何需要调用 Master.aspx 或布局页面的地方使用此日期选择器功能

包括 jQuery 和 jQuery UI 库（我还在使用旧的）
```
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
```

然后添加此脚本，这适用于所有平台。

 <script>
jQuery(function ($) { // wait until the DOM is ready
            $(".editorDate").datepicker({ dateFormat: 'yy-mm-dd' });
        });`
 </script>

您可以在多个页面上添加此“editorDate”。

@Html.TextBoxFor(model => model.FromDate, "{0:yyyy-MM-dd}", htmlAttributes: new { @class= "表单控件编辑器日期"})

【讨论】：

【解决方案11】：

感谢 Alexander，我找到了一种修改 en lang 格式的方法。（不知道是哪个lang使用这种格式）

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

【讨论】：

我认为唯一使用这种格式的“en”国家是加拿大。无论如何，“en”是模棱两可的，因为它还包括美国，它几乎有自己的“特殊”日期格式。
在我的情况下，它是关于覆盖任何客户端区域设置的日期格式，这可能在客户端工作站上有所不同。但是在一个特定页面上，我想使用这种日期格式（出于复制粘贴的原因）。这更像是对 Alexander Farkas 答案的评论，但我将其作为单独的答案，因为我无法在评论中粘贴代码。我在生产环境中使用了一年多。
小心。如果 Webshims 依赖于浏览器对语言环境的解释，您可能会得到不可预知的结果。 'en' 可能并不意味着在不同平台（取决于系统区域设置）甚至在不同浏览器中的相同格式。加拿大的浏览器可能会将其解释为“en-ca”（很可能是 yyyy-mm-dd，但可能不一致），但印度的浏览器可能会将其解释为“en-in”（与世界上大多数国家一样, 会产生 dd-mm-yyyy)。仅仅因为它在生产代码中并不意味着它已经过正确测试 - 生产代码中存在许多 i18n 错误，即使在大型网站上也是如此。
最后一行 $.webshims.activeLang('en');应该强制 lang（或语言环境）到 webshims 覆盖浏览器设置，所以格式总是相同的。

【解决方案12】：

这是正确的解决方案。你应该到处使用 jquery datepicker

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

下面是获取完整代码的链接

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

【讨论】：

【解决方案13】：

这是完美的解决方案。您应该使用 JQuery datepicker 来用户输入日期。它非常易于使用，并且具有 HTML 输入日期所没有的许多功能。

Click here to copy the JQuery datepicker code

【讨论】：

【解决方案14】：

我必须使用 bootstrap-datepicker 插件才能让日历在 Firefox 55 Portable 上运行：

https://bootstrap-datepicker.readthedocs.io/en/latest/

与 Bootstrap v2 和 v3 兼容。它带有一个独立的样式表，因此您不必依赖 Bootstrap。

用法：

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

【讨论】：

【解决方案15】：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

【讨论】：