convert UTC to local time using angularjs

Question

As a response from the json I am getting the UTC timezone. I need to convert it to local time.

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

Can anyone help on this?

Answer 1

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

I created this filter that extends the angular date filter and ensures that the timezone suffix is included for UTC time.

UTC to 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);
        };
    }
})();

Example Usage:

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

Answer 2

EDIT (2nd Jan 2017): Please refer @Jason's answer, it is better than this one since it uses custom filter to fix the date format - that's the more Angular way of doing it.

---

My original answer and edits:

You could 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 documentation of date in angularjs.org. It has quite a few examples that are very helpful!

---

EDIT:

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

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

Check the documentation link that I mentioned above.

EDIT2:

In response to your other comment, use the following code. The problem is that the string that you are getting is not properly formatted so the Date object is not able to recognise it. I have formatted it in the controller and then passed 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>

The JS code for replacement can be improved by finding a smarter way to replace the first 2 occurrences of : character.