使用AngularJS将UTC转换为本地时间

Question

我从json中获取了UTC时区的响应，需要将其转换为本地时间。

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

有人能帮忙解决这个问题吗？

- chandru

---

你能展示一下如何从JSON中接收它吗？它是以毫秒还是字符串的形式呈现的？ - Mihai

它是字符串格式。模式为"yyyy:MM:dd'T'HH:mm:ss'Z'"。 - chandru

如果我在处理时间和时区方面的问题，我总是使用http://momentjs.com/和http://momentjs.com/timezone/。这个库非常方便。 - Christian A

你能从后端以毫秒获取它吗？还是你不能改变这个？ - Mihai

Answer 1

我也遇到了来自.NET Web API的日期格式为“yyyy-MM-ddTHH:mm:ss”（例如：2016-02-23T00:11:31），没有“Z”后缀表示UTC时间的问题。

我创建了这个过滤器，扩展了角度日期过滤器，并确保为UTC时间包含时区后缀。

UTC转本地过滤器：

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

用例示例：

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

- Jason Watmore

---

utcDateString参数作为日期对象传入，而不是字符串。 - OverMars

Answer 2

编辑（2017年1月2日）：请参考@Jason的回答，它比这个回答更好，因为它使用自定义过滤器来修复日期格式 - 这是更符合Angular方式的做法。

---

我的原始回答和编辑：

您可以使用date过滤器来格式化日期：

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

这将输出：

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

(假设 trans.txnDate = 1288323623006;)

请参考angularjs.org中对date的文档，里面有很多非常有用的示例！

---

编辑：

回答您的评论，使用以下内容将日期格式化为17 oct 2014：

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

请查看我上面提到的文档链接。

编辑2：

针对您其他评论的回应，请使用以下代码。问题在于您获取的字符串格式不正确，因此 Date 对象无法识别它。我已在控制器中对其进行了格式化，然后传递给视图。

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代码可以通过找到一种更智能的方法来替换前2个出现的:字符而得到改进。

- Rahul Desai

---

它已经返回了这样的格式“2014:10:17T18:30:00Z”，但我需要像这样的格式“2014年10月17日”。 - chandru

但我问了一个错误的问题。JSON 已经返回了转换后的本地日期 "2014:10:17T18:30:00Z"。在这个本地日期格式中，我需要一个像 'dd MMM yyyy' 这样的格式。有没有办法实现这个？ - chandru

Answer 3

我曾经遇到过同样的问题。AngularJS 的日期过滤器无法识别字符串为 UTC 格式，但 JavaScript 的 Date 对象可以。所以我在控制器中创建了一个简单的函数：

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

然后使用类似以下的代码：

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

它显示本地时区的日期/时间

- Tim R

Answer 4

我曾经遇到过同样的问题。以下是答案：

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

- Rahul Shewale

---

如果你在印度以外的时区怎么办？ - letsbondiway

仅替换+0530为您的UTX时区 - Rahul Shewale

那么，为了使其适用于全球，我们不能使用这个解决方案吗？ - letsbondiway