如何使Firefox和/或IE 10中的HTML 5输入类型=“日期”

191

我觉得奇怪的input type="date"是，在所有这些时间之后，Firefox仍然不支持。实际上，我认为它们不会在input元素上添加太多（如果有）HTML 5新类型。IE10不支持它并不奇怪。所以，我的问题是...

如何type="date"在input不添加另一个.js文件（即jQueryUIDatePicker Widget）的情况下使元素正常工作，而仅获取IE和Firefox浏览器的日历/日期？是否有可以在某处（也许是CDN）应用的功能，这些功能将默认在Firefox和/或IE浏览器中工作？尝试以IE 8+浏览器为目标并针对Firefox没关系，最新版本（28.0）会很好。

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

— 所罗门·克洛森
source

29

Firefox仍然不支持此功能，这对我来说似乎很可笑。今天我已经从Chrome切换到Firefox，仅一天/一周就可以看到这些天的情况，这让我立即想切换回去！

— Codemonkey

19

其开玩笑的FF不暂停日期

— SuperUberDuper

6

这就是为什么当人们说Firefox是最好的浏览器时我感到不高兴的原因。

— 马丁·布劳恩

1

虽然不是polyfill，但我最终还是使用了pickaday，它是一个没有jquery或其他依赖项的纯js库...

— mb21

2

似乎在Firefox 57中默认工作。仍然！

— 安托万·皮萨德

138

您可以尝试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" />

如果不满足默认配置，可以使用多种方法进行配置。在这里，您可以找到datepicker配置器。

注意：虽然将来可能会为webshim发布新的错误修正。不再有任何主要版本。这包括对jQuery 3.0或任何新功能的支持。

— 亚历山大·法卡斯（Alexander Farkas）
source

这是一个很好的解决方案，配置丰富，但是我找不到在哪里设置日期格式，例如“ YYYY / MM / DD”

— Pavel Niedoba 2015年

14

当我尝试在IE 11中运行此jsfiddle时，出现“拒绝访问”错误，并且日期选择器不起作用。

— 沙威2015年

4

这在IE10上不起作用...我得到与@Shavais提到的错误相同的错误...要使其正常工作，请将jquery版本升级到1.11或更高版本。尝试此链接

— Nitin

2

不幸的是，根据作者网站的通知，将无法对即将到来的Jquery 3进行webshims支持。既然如此，我将依靠好的老Jquery UI。

— marionmaiden '16

1

这绝对适用于Firefox。但没有在IE浏览器

— Varuni NR

27

自版本51（2017年1月26日）起在Firefox中使用，但默认情况下尚未激活（尚未）

要激活它：

关于：配置

dom.forms.datetime- >设置为true

https://developer.mozilla.org/zh-CN/Firefox/Experimental_features

— 乔纳森·瓦纳斯（Jonathan Vanasse）
source

很高兴听到这个消息。默认情况下应启用imo。但这是个好消息。

— 所罗门·克洛森

我使用的是FF 64.0.2，但是即使此选项为“ true”（启用），它也不起作用，但datetime框仍仅为文本。我尝试启用“时间选择器”也没有成功。

— Wasted_Coder

20

通过使用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-如果需要，请更改日期格式。

— 达克斯
source

8

OP表示“无需添加另一个.js文件（即jQueryUI DatePicker Widget），就可以工作”……但是这个问题是google的热门话题，因此尽管它不能回答问题，但您的回答确实非常有用。希望我现在不必为发表您的帖子感到难过。

— phil294

2

您还需要包括jQuery UI CSS以便正确显示日历。<br> <link rel =“ stylesheet” href =“ // code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css”>

— YuAn ShaolinMaculelêLai

16

目前，type =“ date”不是实际的规范。这是Google提出的一个概念，其概念是whatwg规范（非官方），仅部分受Chrome支持。

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

我现在不会依靠这种输入类型。拥有它会很好，但是我不认为这是真的。＃1的原因是，对于有些复杂的输入，要确定最佳的UI会给浏览器带来太多负担。从响应的角度考虑它，任何供应商如何知道在400像素，800像素和1200像素宽的情况下，哪种最适合您的UI？

— 克里斯·洛夫（Chris Love）
source

138

我不同意，浏览器应该足够聪明才能解决这个问题。我真的很厌倦使用那里的日期选择器并不得不不断更新它们。

— SuperUberDuper 2014年

49

奇怪的推理。对于浏览器来说负担太大了，对乔Web开发人员来说负担不了？！？

— jeroenh，2015年

35

现在这是HTML 5工作草案的一部分：w3.org/html/wg/drafts/html/master/…–

— 克里斯（Chris）

7

对于每种新的输入类型，我也感到很高兴。它们定义得更好，而且是本地的，通常意味着快速。

— 托马什Zato -恢复莫妮卡

5

@MM谢谢。同时，HTML 5已升级为W3C官方推荐。新链接为w3.org/TR/2014/REC-html5-20141028/…–

— 克里斯（Chris）

9

这是一个完整的示例，其日期格式为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" />

— 德鲁
source

1

有谁知道这是否还允许添加时间选择器？

— drooh

我在JSFiddle @Drooh中尝试了您的脚本，但是它不起作用。每当我选择一个日期时，它就会在输入字段中显示一个毫秒，然后消失。有人可以提供日期配置为dd / mm / yyyy的工作提琴版本吗？

— Ryan Coolwebs 2015年

请注意，截至2016年8月，webshim不适用于jQuery 3，在我的测试中，它也不适用于2.2.4。

— drooh

我发现这是最好的解决方案，直到firefox添加日期输入stackoverflow.com/questions/2528706/…–

— drooh

4

尽管这不允许您获取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落后于本机添加。

— ajax1515
source

1

有“时间”的版本吗？

— 马尔科姆·萨尔瓦多

1

请扩展此示例。这是输入的html属性吗？

— Wasted_Coder

3

这只是跟随达克斯回答的建议。（我会在该答案中添加评论，但我没有足够的声誉来评论其他问题）。

ID对于每个字段都应该是唯一的，因此，如果表单中有多个日期字段，则可以使用class元素代替ID：

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

您的输入为：

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

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

— 代写诗
source

3

最新版本的firefox firefox 57（Quantum）支持日期和其他功能，它于2017年11月14日发布。您可以通过单击此链接进行下载

— 伊凡达
source

0

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

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

 $.webshims.activeLang('en');

— 帕维尔·尼多巴（Pavel Niedoba）
source

我认为使用这种格式的唯一“英语”国家是加拿大。在任何情况下，“ en”都是模棱两可的，因为它也包括美国，美国在很大程度上具有“特殊”日期格式。

— Michael Scheper

就我而言，这是关于任何客户端语言环境的覆盖日期格式的，在客户端工作站上可能会有所不同。但是，在一个特定页面上，我想使用此日期格式（出于复制粘贴的原因）。它更像是亚历山大·法卡斯（Alexander Farkas）答案的注释，但由于我无法将代码粘贴到注释中，因此我将其单独回答。我在生产环境中使用了一年多。

— Pavel Niedoba '16

小心。如果Webshims依赖浏览器对语言环境的解释，则可能会产生不可预测的结果。“ en”可能并不意味着在不同平台（取决于系统区域设置）或什至在不同浏览器中的相同格式。加拿大的浏览器可能会将其解释为“ en-ca”（很可能是yyyy-mm-dd，但可能不一致），而印度的浏览器可能会将其解释为“ en-in”（与世界上大多数国家一样），则会产生dd-mm-yyyy）。仅仅因为它在生产代码中并不意味着已经对其进行了正确的测试—即使在大型站点上，生产代码中也存在许多i18n错误。

— Michael Scheper

最后一行$ .webshims.activeLang（'en'）; 应该将lang（或语言环境）强制为webshims覆盖浏览器设置，因此格式始终相同。

— Pavel Niedoba

0

有时您不想在项目中使用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>

展开摘要

— 安德烈（Andrej）
source

3

此代码完全失败。我无法输入日期，因为该字段已经用“ YYY-MM-DD”填充，并且如果我尝试清除它，它会重新出现。

— Stephen R

请不要删除连字符。我已经在Windows 10中成功测试了Google Chrome 52，Firefox 41，Opera 39，Microsoft Edge，IE11。请告诉我您的设备，操作系统和浏览器。

— 安德烈（Andrej）

我实际上只是点击了您评论下方的“运行代码段”链接。我无法正确键入日期，因为“ YYYY-MM-DD”占位符正在与我积极竞争，而不是在我开始键入时消失。我使用的是最新的Firefox在Windows 10

— 斯蒂芬- [R

1

不会回答问题，因为它违反了不添加外部JS文件的条件，并且实际上，代码本身的使用完全不直观。即使不是原始日期格式也可以强制对人使用ISO格式，因为重新出现输入掩码时不能输入新日期，不能输入输入掩码，因为它不是掩码而是框中的实际文本，必须删除掩码为您键入。无论如何都不比带有正则表达式验证的标准输入要好

— MikeT

0

这是正确的解决方案。您应该在各处使用jquery datepicker

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

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

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

— Santosh Devnath
source

-1

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

单击此处复制JQuery日期选择器代码

— Santosh Devnath
source

-1

我必须使用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'
});

— 圣地亚哥退出
source

-2

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

— 韦瑟
source