Angular show wrong time with unknown timezone

Question

flight.departure_at is a UTC format 2016-05-04T19:00:00.000Z

When I display this expression in the page,

It's format is totally out of expectation.

Why does the 12:00 come out? How come?

I also want to know how could I keep all the time format in UTC globally without adding options everywhere. It will make the whole App vulnerable

code

Departure_time: {{flight.departure_at}} ||| {{flight.departure_at | date: 'HH:mm'}}

output

Departure_time: 2016-05-04T19:00:00.000Z ||| 12:00

This might be helpful to you. http://stackoverflow.com/questions/21841413/angularjs-global-date-timezone-offset — Danieboy, Jul 25 '16 at 16:23

rejo · Answer 1 · 2016-07-25T18:06:43.787

This standard is called ISO-8601 and the format is: YYYY-MM-DDTHH:mm:ss.sssZ

'T' is just a separator between date and time in ISO-8601 format.

'Z' is zero time zone ( your getting 12:00 , because it convert to your timezone)

we can use parse like this ,

var date = new Date('2016-05-04T19:00:00.000Z');
console.log(date.getUTCHours()); // Hours - 19
console.log(date.getUTCMinutes()); //0
console.log(date.getUTCSeconds());// 0


console.log(Date.parse(date));
console.log(new Date(Date.parse(date)));

OR

Date.parse(DATE) for getting time in standard time format

UTC

score 0 · Answer 2 · edited May 23 '17 at 12:24

As stated in a different thread about personalizing timezones to the user - I've found this to be very helpful when coming to dealing with timezones in Angular. (https://stackoverflow.com/a/35161107/3585278)

module.config(['$provide', function($provide) {
var DEFAULT_TIMEZONE = 'GMT';

$provide.decorator('dateFilter', ['$delegate', '$injector', function($delegate, $injector) {
    var oldDelegate = $delegate;

    var standardDateFilterInterceptor = function(date, format, timezone) {
        if(angular.isUndefined(timezone)) {
            timezone = DEFAULT_TIMEZONE;
        }
    return oldDelegate.apply(this, [date, format, timezone]);
    };

    return standardDateFilterInterceptor;
    }]);
}]);

score 0 · Answer 3 · answered Jul 26 '16 at 06:21

I suggest you use Angular moment for all date time related stuff for the frontend and moment for the controller part.

You should store all time as UTC in backend and then on frontend you can set user's timezone globally as

app.constant('angularMomentConfig', {
  'timezone' : <user's timezone> 
});

Render UTC time now on frontend without worrying about timezone(make sure all variables are either moment or Date object):

<td ng-bind="flight.departure_at| amDateFormat:'HH:mm'"></td>

Angular show wrong time with unknown timezone

code

output

3 Answers3