Skip to content
Advertisement

Input type=time showing wrong timezone

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>

Advertisement

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.

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement