如何从 HTML5 日期输入中解析日期？

Posted 2023-02-25

【中文标题】如何从 HTML5 日期输入中解析日期？

【英文标题】：How do you parse a date from an HTML5 date input?

【发布时间】：2013-05-25 09:22:39

【问题描述】：

我的网页上有一个输入，我可以通过获取 ISO 字符串并提取前 10 个字符来设置日期。

date = new Date();
dateInput.value = date.toISOString().substr(0,10);

这非常有效。我的问题是，当我尝试恢复日期时。我要约一天假。

var newDate = new Date(dateInput.value);

我也试过下面的代码来弥补，但也不总是正确的

新日期(Date.parse(element.value) + 86400000)

所以我的问题是：有没有一种优雅的方法可以始终如一地获得正确的日期。我已经环顾了一段时间，但似乎与 javascript 中的日期解析没有太大的一致性。

【问题讨论】：

date的值从何而来？

认为你会发现momentjs.com很好用

我已经找到了一种方法来使用它给我的字符串，只是从不将它转换为日期，但我仍然对它为什么会这样表现感到困惑。

【参考方案1】：

尝试使用.toLocaleString将日期输入到输入中，并在解析时添加时间，如下所示：

date = new Date();
dateInput.value = date.toLocaleString("sv-SE", 
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
);

要将值放入 Date 对象，请使用：

new Date(inputdateInput.value + "T00:00");

我写了一篇关于日期对象和日期输入之间转换的小帖子here

【参考方案2】：

您还可以将输入字符串从YYYY-MM-DD 转换为MM/DD/YYYY，然后解析日期以获得正确答案。

示例：

不要使用：

new Date(Date.parse('2018-09-28')) // Thu Sep 27 2018 19:00:00 GMT-0500 (Central Daylight Time)

相当使用

new Date(Date.parse('09/28/2018')) // Fri Sep 28 2018 00:00:00 GMT-0500 (Central Daylight Time)

（注意：我在 CDT）

在 Chrome、Firefox、Safari、旧版 Edge 和 IE 中测试。

【参考方案3】：

正如 Marty 所说，问题在于输入的时区（由 W3C 定义的 UTC）和 JS 时区（本地）的表示之间的差异。解决方案是 getTimezoneOffset（以分钟为单位）并将所有内容转换为毫秒：

var today = document.getElementById("myInputDate").valueAsDate;
var tomorrow = new Date(today.valueOf() + 86400000 + (today.getTimezoneOffset() * 60000));

86400000 = 一天中的毫秒数

today.getTimezoneOffset() * 60000 = timezoneOffset 以毫秒为单位

【参考方案4】：

var newDate = new Date(dateInput.value + 'T00:00');

这将在任何时区给出正确的日期。

【参考方案5】：

它将日期解释为 UTC，对于大多数时区来说，这会使它看起来像“昨天”。一种解决方案可能是将时区偏移添加回日期以将其“转换”为您的本地时区。

【讨论】：

你是绝对正确的。我不再从事这个项目，但这是问题的正确答案。

@Duckbrain 这就是为什么I asked you what timezone you were in...

【参考方案6】：

如果它是支持浏览器上的实际date 输入，那么它将有一个valueAsDate property。无需解析。

【讨论】：

这很酷。我不知道那个属性，但它给了我同样的问题。日期比我放在盒子里的日期晚一天。我想知道这是否是我的浏览器。我正在使用 Chrome 27.0.1453.94 m。我在IE上试过，不支持这个属性（惊喜）。

Firefox 根本不支持它。太糟糕了。无论如何，我只需要它在基于 Web 工具包的浏览器上工作。 （iPhone 和 android）。

@Duckbrain 你确定日期晚了一天吗？你在哪个时区？

其实是需要解析的。 html5 input type="date" 元素恢复为旧浏览器中的标准文本输入元素。这是为了保持兼容性。因此，与其使用 valueAsDate 属性，不如解析元素的值以允许用户手动输入日期（根据使用modernizr/@media 查询隐藏的标签格式化）。

@CodeO'Clock "如果是支持浏览器上的实际日期输入"