Convert UTC to local time using angularjs

Question

In response from JSON, I get the UTC time zone. I need to convert it to local time.

<span class="text-muted">{{trans.txnDate}}</span> 

Can anyone help with this?

Answer 1

EDIT (January 2, 2017): Please refer to @Jason's answer, this is better than this as it uses a custom filter to fix the date format - this is more of an Angular way to do this.

---

My initial answer and changes:

You can use the date filter to format the date:

 <span class="text-muted">{{trans.txnDate | date:'yyyy-MM-dd HH:mm:ss Z' }}</span> 

This will output:

 2010-10-29 09:10:23 +0530 

(assuming trans.txnDate = 1288323623006; )

See this date documentation at angularjs.org . These are so many examples that are very useful!

---

EDIT:

In response to your comment, use the following information to get the date as 17 oct 2014 :

 <span class="text-muted">{{trans.txnDate | date:'dd MMM yyyy' | lowercase }}</span> 

Check out the link to the documentation I mentioned above.

EDIT2:

In response to your other comment, use the following code. The problem is that the string you receive is not formatted properly, so the date object cannot recognize it. I formatted it in the controller and then passed it to the view.

 function MyCtrl($scope) { var dateString = "2014:10:17T18:30:00Z"; dateString = dateString.replace(/:/, '-'); // replaces first ":" character dateString = dateString.replace(/:/, '-'); // replaces second ":" character $scope.date = new Date(dateString); } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="MyCtrl"> {{date | date:'dd MMM yyyy' | lowercase }} </div> 

JS replacement code can be improved by finding a more reasonable way to replace the first 2 occurrences of a character :

Answer 2

I just had to solve this problem, as well as dates coming from the .NET Web API in the format “yyyy-MM-ddTHH: mm: ss” (for example, 2016-02-23T00: 11: 31) without a “Z 'to indicate the time UTC

I created this filter that extends the angular date filter and ensures that the time zone suffix is ​​enabled for UTC time.

UTC for local filter:

 (function () { 'use strict'; angular .module('app') .filter('utcToLocal', utcToLocal); function utcToLocal($filter) { return function (utcDateString, format) { if (!utcDateString) { return; } // append 'Z' to the date string to indicate UTC time if the timezone isn't already specified if (utcDateString.indexOf('Z') === -1 && utcDateString.indexOf('+') === -1) { utcDateString += 'Z'; } return $filter('date')(utcDateString, format); }; } })(); 

Usage example

 {{product.CreatedDate | utcToLocal:"dd.MM.yyyy"}} 

Answer 3

I had the same problem. An AngularJs format date filter does not detect that a string is a UTC format, but a JavaScript Date object. Therefore, I created a simple function in the controller:

 $scope.dateOf = function(utcDateStr) { return new Date(utcDateStr); } 

And then used something like:

 {{ dateOf(trans.txnDate) | date: 'yyyy-MM-dd HH:mm:ss Z' }} 

Displays date / time in local time zone

Answer 4

I had the same problem. Below is the answer

 {{trans.txnDate | date:'yyyy-MM-dd HH:mm:ss Z':'+0530' }} //You can also set '+0000' or another UTX timezome