如何获取HTML 5输入类型="日期"在Firefox和/或IE 10中工作

时间:2014-04-10 08:44:51

标签: html5 forms jquery-ui internet-explorer firefox

我觉得奇怪的是,在所有这段时间之后,Firefox仍然不支持input type="date"。事实上,我并不认为他们在输入元素上添加了很多(如果有的话)HTML 5新类型。 IE10不支持它并不奇怪。所以,我的问题是......

如何让type="date"元素在{$ 1}元素上工作而不添加另一个.js文件(即input DatePicker Widget)只是为了获取IE的日历/日期和Firefox浏览器?有什么东西可以应用到某个地方(可能是CDN?),这将使这个功能在Firefox和/或IE浏览器中默认工作?尝试定位IE 8+浏览器和Firefox,没关系,最新版本(28.0)会没问题。

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

15 个答案:

答案 0 :(得分:134)

您可以尝试在webshims +上提供的cdn仅加载填充(如果需要)。

以下是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发布新的bug修复版本。将不会有任何重大发布。这包括对jQuery 3.0或任何新功能的支持。

答案 1 :(得分:26)

自版本51(2017年1月26日)起在Firefox中, 但它默认情况下未激活(尚未)

激活它:

关于:配置

dom.forms.datetime - &gt;设为真

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

答案 2 :(得分:20)

通过使用jQuery提供的datePicker组件,可以通过一种简单的方法来消除此限制。

  1. 包含jQuery和jQuery UI库 (我还在使用旧的)

    • SRC =&#34; JS / jQuery的1.7.2.js&#34;
    • SRC =&#34; JS / jquery的-UI-1.7.2.js&#34;
  2. 使用以下片段

    $(function() {
         $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
    });
    
  3. 如果需要,请参阅jQuery UI DatePicker - Change Date Format

答案 3 :(得分:17)

类型=&#34;日期&#34;此时不是实际的规格。这是Google提出的一个概念,并且符合他们的规范(非官方规范),并且仅受Chrome的部分支持。

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

此时我不会依赖此输入类型。这将是很好的,但我不预见这个实际上是这样做的。第一个原因是它给浏览器带来了太多负担,无法确定最复杂的用户界面。从响应的角度考虑一下,任何供应商如何知道什么最适合您的UI,如400像素,800像素和1200像素宽?

答案 4 :(得分: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" />

答案 5 :(得分:4)

虽然这不允许你获得一个日期选择器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在本地包含这个内容方面落后了。

答案 6 :(得分:3)

这只是遵循Dax答案的建议。 (我会在答案中对其进行评论,但我还没有足够的声誉对其他问题发表评论)。

每个字段的ID都应该是唯一的,因此,如果表单(或表单)中有多个日期字段,则可以使用class元素而不是ID:

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

并输入为:

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

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

答案 7 :(得分:3)

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

答案 8 :(得分:1)

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

  1. 包含 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 = "form-control editorDate"})

答案 9 :(得分:0)

感谢Alexander,我找到了一种如何修改en lang格式的方法。 (不知道哪个郎使用这种格式)

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

 $.webshims.activeLang('en');

答案 10 :(得分:0)

有时您不希望在项目中使用Datepicker http://jqueryui.com/datepicker/,因为:

  • 您不想使用jquery
  • 项目中jquery版本的冲突
  • 年份的选择不方便。例如,您需要在prev按钮上单击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>

答案 11 :(得分:0)

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

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

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

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

答案 12 :(得分:0)

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

答案 13 :(得分:-1)

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

Click here to copy the JQuery datepicker code

答案 14 :(得分:-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>