Convert UTC time to local time in angular

Question

I want to convert this utc format date to india date and time format in angular

2019-02-18T17:31:19-05:00

I expect in this format DD/MM/YYYY HH:MM(eg: 02/19/2019 04:01 AM). Can anyone please suggest me how to do it..

Is this to be shown on your component.html? Or component.ts? — wentjun, Jun 20 '19 at 10:18
Possible duplicate of [Convert UTC date time to local date time](https://stackoverflow.com/questions/6525538/convert-utc-date-time-to-local-date-time) — Cpt Kitkat, Jun 20 '19 at 10:52

score 2 · Answer 1 · answered Jun 20 '19 at 10:21

2

Formats a date value according to locale rules.

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Sourxe: https://angular.io/api/common/DatePipe

answered Jun 20 '19 at 10:21

Umbro

1,984
12
40
99

score 2 · Accepted Answer · answered Jun 20 '19 at 10:23

One way to do it in vanilla JavaScript would be to make use of Date.toLocaleString(), and to convert it to the Indian timezone by setting it as the timeZone property.

new Date('2019-02-18T17:31:19-05:00').toLocaleString("en-US", {timeZone: "Asia/Kolkata"});

console.log(new Date('2019-02-18T17:31:19-05:00').toLocaleString("en-US", {timeZone: "Asia/Kolkata"}));

score 2 · Answer 3 · answered May 04 '20 at 11:35

2

in ts

import {utc} from 'moment';
utc = utc;

in html

{{ utc("2019-02-18T17:31:19-05:00").local().format("DD/MM/YYYY HH:MM")}}

answered May 04 '20 at 11:35

Pavlo Kozachuk

244
3
7

score 0 · Answer 4 · answered Jun 20 '19 at 10:19

0

if you use a locale_id in your module all date pipes should adhere to that locale https://angular.io/api/core/LOCALE_ID

answered Jun 20 '19 at 10:19

FunkeyFlo

295
1
6

score 0 · Answer 5 · answered Jun 20 '19 at 10:30

UTC dates should have 'Z' appended to it. E.g. 2019-02-18T17:31:00Z.

Secondly, convert the date string to a Date object by using Date.parse()

Then use date filter to display the date <span> {{ dateStr | date }}</span>

Check below JS -

angular.module('plunker', []).controller('MainCtrl', function($scope) {
    $scope.dateStr = Date.parse('2019-02-18T17:31:00Z');
});

HTML -

<div ng-controller="MainCtrl">
  {{ dateStr | date }}
</div>

score 0 · Answer 6 · answered Jun 20 '19 at 10:32

If you want you can use a awesome library for date and time related manipulation.

https://momentjs.com/timezone/docs/

In your case you can try out the following

moment.tz('2019-02-18T17:31:19-05:00', 'Asia/Kolkata').format('MM/DD/YYYY HH:mm a');

This will return you the date in the desired format. Let me know if any further explanation is required for this.

Convert UTC time to local time in angular

6 Answers6