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

jdzmm42g  于 2023-04-10  发布在  Java
关注(0)|答案(5)|浏览(121)

DOM:

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

Javascript(jQuery):

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

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

7lrncoxx

7lrncoxx1#

不幸的是,前面的答案对我来说不起作用,因为它们建议将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毫秒)
1.通过转换为UTC返回日期和时间值:2021-03-10T03:50:55+0200-〉2021-03-10T01:50:55Z(按.toISOString()
1.删除尾随的Z以获得具有适合<input type="datetime-local">的格式的真实的本地时间(通过.slice(0, -1)
如果有人需要反向转换,从input value到js Date,那么我们只需要以相反的顺序执行相同的步骤:

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

欢迎提问)

yiytaume

yiytaume2#

更新:此答案可能会根据您当地的时区和时间设置错误的日期(相差一天)。请参阅Maxim的答案以获得解释和正确的解决方案。

--
http://www.w3schools.com/jsref/jsref_toisostring.asp
toISOString()方法使用ISO标准将Date对象转换为字符串。
该标准称为ISO-8601,格式为:YYYY-MM-DDTHH:mm:ss.sssZ
虽然ISO 8601具有一定的灵活性,但javascript的Date的toISOString()格式与上面所示完全相同。
末尾的“Z”表示这是一个UTC日期。因此,此表示包含时区信息。(Javascript日期自然是UTC时间,因为它们在内部表示为自epoch以来的毫秒。)
类型为datetime-local的HTML5输入的格式必须是...
以下部分,按以下顺序:

  • 约会
  • 文字字符串“T”。
  • 一段时间。

示例:
1985-04-12T23:20:50.52
1996年12月19日16时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));
4urapxun

4urapxun3#

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-date转换的更多信息,请查看我写的this文章。

kpbpu008

kpbpu0084#

使用$('#myTextbox')[0].valueAsNumber = new Date().getTime()
HTMLInputElement接口也有valueAsDate属性,但type=datetime-local不支持。
https://html.spec.whatwg.org/multipage/input.html#input-type-attr-summary

khbbv19g

khbbv19g5#

对我来说,我确实喜欢这样:

const d = new Date()
element.value = `${d.toLocaleDateString().split("/").reverse().join("-")} ${d.toLocaleTimeString()}`

相关问题