Date formating gives different results in Chrome than in other browsers?

Question

I want to show the time in a readable format. So I am using the below js code. But the output is different in Chrome and IE. How do I change the code to give the same output across all the browsers ?

The output in IE : 12:46 am

In Chrome : 6:16 am

Time zone is : UTC +05:30

    var unReadableDate = "2016-01-25T00:46:00";
    var newDate = new Date(unReadableDate);
    //var timeZoneOffset = (new Date()).getTimezoneOffset();
    //newDate.setMinutes(newDate.getMinutes() - timeZoneOffset);
    alert(formatAMPM(newDate));

    //below function formats time in am and pm
    function formatAMPM(date) {
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var ampm = hours >= 12 ? 'pm' : 'am';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0' + minutes : minutes;
        var strTime = hours + ':' + minutes + ' ' + ampm;
        return strTime;
    }

For me, Chrome outputs `1:46 am`. The problem might be related to the users timezone. Firefox also outputs `12:46 am`, by the way. — Philipp, Feb 14 '16 at 11:14
Don't parse strings with the Date constructor, it is unreliable (as you've discovered). An ISO 8601 datetime strings without a timezone should be treated as local (i.e. consider the system timezone offset) however some browsers don't and some will not parse it at all. Manually parse the string, it only requires a 2 line function or library. — RobG, Feb 14 '16 at 20:57

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Converting a UTC format string to a date using Javascript Date constructor is not reliable. If you want to tackle timezone issues with date you should use moment.js. To understand more you can use below link.

Javascript Date issue

OR simple way to resolve the issue is pass individual arguments in the date instead of complete string. To understand more you can use below link

DateTime UTC

edited May 23 '17 at 11:59

Community

1
1

answered Feb 14 '16 at 11:26

Nitin Garg

888
6
7

The only sensible answer. – RobG Feb 14 '16 at 20:59

score 1 · Answer 2 · answered Feb 14 '16 at 11:36

1

Your problem is that your date string being treated as a local time vs it being treated as UTC.

Just make it unambiguous by specifying the time zone. Change

var unReadableDate = "2016-01-25T00:46:00";

to

var unReadableDate = "2016-01-25T00:46:00Z";

answered Feb 14 '16 at 11:36

potatopeelings

40,709
7
95
119

Thanks for the answer. But the solution is not working – Karthik Feb 14 '16 at 12:31
Strange (I was trying in IE11 vs Chrome btw). have you tried specifying the date object using a different constructor (say `new Date(2016, 1, 25, 0, 46, 0)`) – potatopeelings Feb 14 '16 at 12:52
See Nitin Garg's answer. Don't parse strings with the Date constructor. – RobG Feb 14 '16 at 20:55

score 1 · Accepted Answer · answered Feb 14 '16 at 13:02

Can you please try replacing this

var unReadableDate = "2012-06-25T00:46:00.000Z"
    var newDate = new Date(unReadableDate);
    //var timeZoneOffset = (new Date()).getTimezoneOffset();
    //newDate.setMinutes(newDate.getMinutes() - timeZoneOffset);
    alert(formatAMPM(newDate));

    //below function formats time in am and pm
    function formatAMPM(date) {
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var ampm = hours >= 12 ? 'pm' : 'am';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        minutes = minutes < 10 ? '0' + minutes : minutes;
        var strTime = hours + ':' + minutes + ' ' + ampm;
        return strTime;
    }

Yeah.. this works.. its giving the same result in both Chrome and IE — Karthik, Feb 14 '16 at 16:00
Good. If you think this is the right answer, please accept it. Thanks — Nitin Garg, Feb 14 '16 at 16:02

Date formating gives different results in Chrome than in other browsers?

3 Answers3