将javascript日期分配给html5 datetime-local输入

Question

DOM:

<input id="myTextbox" type="datetime-local" />

Javascript(jQuery):

$('#myTextbox').val(new Date().toISOString());

不行.input [type = datetime-local]的格式应该是ISO 8601,这是javascript的Date.toISOString()返回的.

Answer 1

不幸的是，前面的答案对我来说不能正常工作，因为他们建议将 UTC 时间视为我的当地时间（通常来说，这是不正确的）。

例如，如果我的本地时间是2021-03-10T01:50:55+0200，则date.toISOString()返回2021-03-09T23:50:55Z，所以我不能只Z在最后剪切，因为datetime-local我需要本地日期时间2021-03-10T01:50:55，而不是2021-03-09T23:50:55。

因此，固定代码如下：

const d = new Date();
const dateTimeLocalValue = (new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString()).slice(0, -1);
$('#myTextbox').val(dateTimeLocalValue);

这就是它起作用的原因：我们仍然使用从 UTC 时间格式中删除尾随“Z”的技巧，但在执行此操作之前，我们将时间向后移动我们的时区偏移量（以date.getTimezoneOffset()分钟为单位返回）。之后，转换后的时间转换为 UTC，提供与本地相同的日期和时间。当然，实际上，转移的时间是不同的时刻，但只要它的 UTC 日期和时间与本地时区的日期和时间相匹配，我们就不在乎。

对于上面的示例，它的工作方式如下：

1. 将本地时间沿相反方向偏移时区偏移量（例如，如果是 UTC+2，则我们距离 UTC 更远）：2021-03-10T01:50:55+0200-> 2021-03-10T03:50:55+0200（按- date.getTimezoneOffset() * 60000，因为 1 分钟是 60000 毫秒）
2. 通过转换为 UTC 返回日期和时间值：2021-03-10T03:50:55+0200-> 2021-03-10T01:50:55Z(by .toISOString())
3. 删除尾随Z以获取具有适合格式的真正本地时间<input type="datetime-local">(by .slice(0, -1))

如果有人需要反向转换，从输入值到js Date，那么我们只需要以相反的顺序执行相同的步骤：

const dateTimeLocalValue = $('#myTextbox').val();
const fakeUtcTime = new Date(`${dateTimeLocalValue}Z`);
const d = new Date(fakeUtcTime.getTime() + fakeUtcTime.getTimezoneOffset() * 60000);
console.log(d);

有任何疑问欢迎留言）

Answer 2

http://www.w3schools.com/jsref/jsref_toisostring.asp:

toISOString()方法使用ISO标准将Date对象转换为字符串.

该标准称为ISO-8601,格式为:YYYY-MM-DDTHH:mm:ss.sssZ

虽然ISO 8601具有一定的灵活性,但javascript的Date's toISOString()的格式如上所示.

末尾的"Z"表示这是UTC日期.因此,该表示包括时区信息.(Javascript日期自然是UTC时间,因为它们在内部表示为自纪元以来的毫秒数.)

使用type = datetime-local的HTML5输入格式必须是......

以下部分,完全按以下顺序:

• 一个约会.
• 文字字符串"T".
• 一次.

例:

1985-04-12T23:20:50.52

1996-12-19T16:39:57

http://www.w3.org/TR/html-markup/input.datetime-local.html

这仍然是ISO 8601,但更严格,并且它不允许指定时区.

幸运的是,删除时区就像删除尾随的'Z'一样简单.

var isoStr = new Date().toISOString();
$('#myTextbox').val(isoStr.substring(0,isoStr.length-1));

Answer 3

Date.toLocaleString可以为你解决这个问题：

$('#myTextbox').val(new Date().toLocaleString("sv-SE", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
}).replace(" ", "T"));

即使在不支持的浏览器（datatime-local例如 Firefox-desktop 和 Safari-desktop）中，这也可以工作。

有关 js 日期转换的日期相关输入的更多信息，请查看我就该主题撰写的这篇文章。

Answer 4

使用$('#myTextbox')[0].valueAsNumber = new Date().getTime()。

HTMLInputElement接口也有valueAsDate属性，但type=datetime-local不幸的是不支持它。

https://html.spec.whatwg.org/multipage/input.html#input-type-attr-summary