logo标签列表

日期选择器HTML5标签在Mozilla浏览器和IE浏览器上无法工作。但它只能在Chrome上工作。

htmlformsinternet-explorerdatepickermozilla
5

我正在尝试在我的网站上使用HTML5日期选择器标签。但是这个标签在Mozilla和IE上不支持。请问有什么方法可以让这段代码在IE和Mozilla中工作?

我想只使用HTML5，不想使用JavaScript。

6个回答
2

如果使用 Mozilla 浏览器，您可以使用 jQuery 日期选择器：使用 $.browser.mozilla 检查浏览器，但在 jQuery>1.9 中将不起作用，因此您需要使用如下所示的 jQuery 迁移：

     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>//jQuery migration
    <script>
        if ($.browser.mozilla)
    {
        if ($('.datepicker')[0].type != 'date') $('.datepicker').datepicker();
        $(function () {
            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "1900:2015",
                dateFormat: "yy-mm-dd",
                defaultDate: '1900-01-01'
            });
        });
    }

</script>
1
请注意，OP说：“我只想使用HTML5，不想使用JavaScript。” - J0e3gan
2
2

是的，HTML5的DatePicker标签在Mozilla Firefox中不受支持。但是您可以通过添加一些.js文件在您的网站上使用DatePicker。

以下是我的fiddle，使用了一些.js文件。这段代码在Chrome和Mozilla上都可以正常工作。

<script>
$(function() {
$( "#datepicker" ).datepicker();

});
</script>
</head>
<body>
<p>Your Selected date Is : <input type="text" id="datepicker"></p>

http://jsfiddle.net/Vq65z/504/

请注意，仅链接答案是不被鼓励的，SO答案应该是寻找解决方案的终点（而不是另一个参考站点，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的摘要，将链接作为参考。 - kleopatra
好的，我明白你想说什么。实际上，我是Stack Overflow的新手，所以我不太了解如何回答Overflow的问题。感谢建议 #t3chb0t。 - Pardeep Jain
1
0
不要忘记像这样写doctype：
<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  Birthday: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

Firefox和Mozilla不支持Date-HTML5！但它很快将提供支持。

但它将在 Google Chrome、Opera 和 Safari 上平稳运行。

Eirenaios，我只使用了这个标签，但是IE和Mozilla不支持这个标签。你能告诉我有什么CSS hack吗？ - user3801514
1
jQuery UI只是一种方式，而不是HTML5。 - Suresh Karia
0

只需使用日期选择器 polyfill。这里有一个演示。

<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>

<script>
  //webshim.setOptions('basePath', '/js-webshim/minified/shims/');

  //request the features you need:
  webshim.polyfill('es5 mediaelement forms');

  $(function(){
    // use all implemented API-features on DOM-ready
  });
</script>

<input type="date" />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接