Input type=time showing wrong timezone

Tags: ,



When using <input type="time"> and setting the time with valueAsDate the browser displays the time in GMT instead of local time, is there any way to change this behavior? I want the browser to display the local time.

If you’re not on GMT time than you should see that the hour in the input is different the in the p element

(I tried this in Chrome and Firefox)

let date = new Date;
document.querySelector("input").valueAsDate = date;
document.querySelector("p").innerText = date;
<input type="time">
<p></p>

Answer

.toLocaleString can help out here:

let date = new Date;
document.querySelector("input").value = date.toLocaleString("sv-SE", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit"
});
document.querySelector("p").innerText = date;
<input type="time">
<p></p>

I wrote up a little article about this problem on dev.to.



Source: stackoverflow