Input type=time showing wrong timezone

Question

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>

I am in Central Time Zone and I do see a different time (10:27:17.933 PM) in input field and a different time (Tue Dec 03 2019 16:27:17 GMT--0600 Central Standard Time) in the p element. — Nawed Khan, Dec 03 '19 at 22:29
So basically you just want to get the current timezone a user is in. This might not be the answer you want, but have you thought of using Moment's Timezone? Moment has saved me from a lot of headache with date and time issues. Note: I'm in PST so I'm seeing what you are saying I should see. — cbloss793, Dec 03 '19 at 22:29
[html5-date-input-field-and-valueasdate-timezone-gotchas](https://austinfrance.wordpress.com/2012/07/09/html5-date-input-field-and-valueasdate-timezone-gotcha-3/) — Olian04, Dec 03 '19 at 22:33
Does this answer your question? [What is the correct way to set and get HTMLInputElement.valueAsDate using local Dates?](https://stackoverflow.com/questions/53032953/what-is-the-correct-way-to-set-and-get-htmlinputelement-valueasdate-using-local) — ecg8, Dec 03 '19 at 22:39

score 2 · Accepted Answer · edited Dec 29 '20 at 17:16

2

.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.

edited Dec 29 '20 at 17:16

avrahamcool

13,888
5
47
58

answered Jun 25 '20 at 17:12

Mendy

7,612
5
28
42

Marios Nikolaou · Answer 2 · 2019-12-03T23:05:41.540

To get the local time you should create date object and set hours and minutes in input field.Check my solution.

$(document).ready(function(){    
 
    setInterval(updateTime,1000);
    
    function updateTime(){
        //create date instance to get now time 
        var date = new Date();
        hours = date.getHours();
        minutes = date.getMinutes();
        seconds = date.getSeconds();
        
        //add extra zero if the minutes is less than 2 digits
        if(hours < 10){
          hours = '0' + hours;
        }

        //add extra zero if the minutes is less than 2 digits
        if(minutes < 10){
          minutes = '0' + minutes;
        }
      
        $('input[type="time"]').each(function(){
            $(this).attr({'value': hours + ':' + minutes + ':' + seconds});
        });
      
      //document.getElementById("myTime").value = hours+":"+minutes+":"+seconds;
      
    }
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myTime" type='time'/>
<p></p>

score 1 · Answer 3 · answered Dec 03 '19 at 22:36

1

This is expected behaviour. According the HTML spec for :

The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid time string that represents the UTC time component that is represented by input.

If you want to display a localized time string, you should try converting to a string (see toLocaleTimeString) first or using moment.js.

answered Dec 03 '19 at 22:36

S M

8,155
3
35
36

Than whats the point of having `valueAsDate`? if the date it sets and returns are never what you need (unless your on GMT) – Mendy Dec 03 '19 at 22:52

Input type=time showing wrong timezone

3 Answers3