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

Posted

技术标签:

【中文标题】如何让 HTML 5 输入 type="date" 在 Firefox 和/或 IE 10 中工作【英文标题】:How to get HTML 5 input type="date" working in Firefox and/or 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 中默认工作。仍然! 【参考方案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 添加日期输入 ***.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。

用法:

&lt;input class="datepicker"&gt;

$('.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>

【讨论】:

以上是关于如何让 HTML 5 输入 type="date" 在 Firefox 和/或 IE 10 中工作的主要内容,如果未能解决你的问题,请参考以下文章

在移动设备上,如何让“输入”在 type="number" 输入中提交表单?

Chrome 上浮点数的 HTML 5 input type="number" 元素

如何让“文件”类型的 HTML 输入元素只接受 pdf 文件?

输入type=password,不要让浏览器记住密码

html中点击<input type="submit" value="提交">后,如何让结果在新标签页打开?

如何从 JavaScript 禁用输入 type="date" 的特定日期