HTML5 输入日期类型的存储格式不一致

Question

我在使用类型设置为 "date" 的 HTML5 输入字段时遇到问题。

我的测试页面如下：

<!DOCTYPE html>
<html>

<head>
    <script>
    function testDate() {  
       window.alert("Date: " + document.getElementById("date").valueAsDate.toJSON());
    }
    </script>
</head>

<body>
    <form>
      <label for="date">Date</label>
      <input id="date" type="date" onchange="testDate()" required />
    </form>
</body>

</html>

如果我在 Opera 中加载此页面，我会看到 'date picker'。如果我 select 2016 年 8 月 10 日，我会看到一个弹出窗口 window，它表现出正确的行为，即显示以下内容：

"Date: 2016-06-10T00:00:00.000Z"

如果我在 Firefox 中加载页面，我不会得到任何类型的 'date picker'，它会让我输入任何我想要的值。我尝试了以下输入：

10/08/2016
10-08-2016
2016-08-10

在所有情况下，我都会将以下内容记录到控制台：

TypeError: document.getElementById(...).valueAsDate is undefined

在我的真实代码中，我只是想允许用户 select 一个日期，将其转换为 JSON 日期，然后通过 XMLHttpRequest 发送它，但我不能似乎发现日期格式有任何一致性。

有人可以帮忙吗？

Answer 1

目前，如果您不创建特定于浏览器的 Web 应用程序，则使用字段还为时过早。如您所见 here - Firefox、Safari 和 Internet Explorer 不支持此类输入字段。

您可以尝试使用pattern attribute，它可用于对用户输入进行简单验证。它有更好的支持，但仍然不完美。

您也可以尝试使用one of these vanillaJS datepicker implementations。

HTML5 输入日期类型的存储格式不一致

HTML5 input date type is not storing in a consistent format

html

javascript

firefox

opera