浏览器是否不再支持日期时间选择器？

Question

我一直在寻找一个简单的标准日期时间选择器，很多网站都这样说：

<input type="datetime" name="formStartDate">

应该生成一个受支持的日期时间选择器，但我没有这样的运气，我真的不想经历导入和下载一大堆框架和文档的过程来实现这样一个简单的功能......

好的，既然它不再受支持，有没有一种简单的方法可以在没有大量框架的情况下获得一个？还是真的只是删除它而不提供其他东西？

好的，效果很好！除了我只能在页面上工作一个，我想要两个。我认为这与这两个片段通过 id 进行通信并且必须是唯一的这一事实有关。你能帮我在同一页面上进行多个工作吗？

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

Answer 1

根据 W3School，Chrome、Firefox 或 Internet Explorer 不支持此功能：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_datetime

以下是关于他们为何取消支持的解释：Why is HTML5 input type datetime removed from browsers already supporting it?

您可以在网上找到许多替代方案（使用 JavaScript），jQueryUI 实现了一个：https://jqueryui.com/datepicker/

Answer 2

似乎任何流行的浏览器都不支持输入类型 'datetime'。

你可以试试

<input type='datetime-local' name="formStartDate">

相反。 Chrome、Safari 和 Opera 支持，但 IE 或 Firefox

不支持

来源：http://www.w3schools.com/html/html_form_input_types.asp

Answer 3

我正在使用 Eonasdan 的 datetimepicker 实现 here。对我来说，每个页面有多个选择器就像将它们附加到页面上的不同#ids 一样简单。

这是我用来实现四个日期时间选择器的方法。第一个（作业）从模板引擎加载现有数据，第二个默认为当前日期级别信息和常量时间的混合。

$(function () {
        var d = new Date();
        var month = d.getMonth();
        var day = d.getDate();
        var year = d.getFullYear();

        $('#jobDateStart').datetimepicker({
            defaultDate: moment("{{ $data['job_info']['start_date'] }}",'m/d/Y H:i:s')
        });
        $('#jobDateEnd').datetimepicker({
            defaultDate: moment("{{ $data['job_info']['end_date'] }}",'m/d/Y H:i:s')
        });
        $('#dayDateStart').datetimepicker();
        $("#dayDateStart").data("DateTimePicker").date(new Date(year, month, day, 7, 00));
        $('#dayDateEnd').datetimepicker();
        $("#dayDateEnd").data("DateTimePicker").date(new Date(year, month, day, 17, 00));
});

Answer 4

如果您需要在网络上显示数据选择器，请使用代码

import React from "react";

export default function DateTimePicker({ value, onChange }) {
  return React.createElement("input", {
    type: "date",
    value: value,
    onInput: onChange,
  });
}

浏览器是否不再支持日期时间选择器？

Do browsers no longer support date time picker?

html

datetimepicker