Question

我有一个以毫秒为单位的UTC日期，我将其传递给Angular的日期过滤器进行人工格式化。

{{someDate | date:'d MMMM yyyy'}}

很棒，除了someDate是UTC，日期过滤器认为它是在当地时间。

如何告诉Angular someDate是UTC？

谢谢。

Answer 1

似乎AngularJS人们正在1.3.0版本中进行操作。您需要做的就是在格式字符串后添加: 'UTC'。类似的东西：

{{someDate | date:'d MMMM yyyy' : 'UTC'}}

正如您在docs中所看到的，您也可以在此处使用它： Plunker example

BTW，我认为Z参数有一个错误，因为即使使用＆＃39; UTC＆＃39;它仍会显示本地时区。

Answer 2

类似问题here

我将重新发布我的回复并建议合并：

输出UTC似乎是一些混乱的主题 - 人们似乎倾向于moment.js。

借用这个answer，你可以做这样的事情（即使用一个用UTC构造函数创建日期的转换函数）而没有moment.js：

<强>控制器

var app1 = angular.module('app1',[]);

app1.controller('ctrl',['$scope',function($scope){

  var toUTCDate = function(date){
    var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
    return _utc;
  };

  var millisToUTCDate = function(millis){
    return toUTCDate(new Date(millis));
  };

    $scope.toUTCDate = toUTCDate;
    $scope.millisToUTCDate = millisToUTCDate;

  }]);

<强>模板

<html ng-app="app1">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.12" src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="ctrl">
      <div>
      utc {{millisToUTCDate(1400167800) | date:'dd-M-yyyy H:mm'}}
      </div>
      <div>
      local {{1400167800 | date:'dd-M-yyyy H:mm'}}
      </div>
    </div>
  </body>

</html>

这里是plunker玩它

另请参阅this和this。

另请注意，使用此方法时，如果使用Angular的日期过滤器中的“Z”，它似乎仍将打印您的本地时区偏移量。

Answer 3

这是一个filter，它将采用日期字符串OR javascript Date（）对象。它使用Moment.js并可以应用任何Moment.js转换函数，例如流行的'fromNow'

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

因此...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

将显示 2014年11月11日

{{ anyDateObjectOrString | moment: 'fromNow' }}

将显示 10分钟前

如果您需要调用多个时刻功能，可以将它们链接起来。这将转换为UTC，然后格式化......

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}

Answer 4

在angular.js repo中存在针对此的错误 https://github.com/angular/angular.js/issues/6546#issuecomment-36721868

Answer 5

如果使用moment.js，则可以使用moment（）。utc（）函数将moment对象转换为UTC。您还可以使用moment（）。format（）函数在控制器内处理一个漂亮的格式而不是视图。例如：

moment(myDate).utc().format('MM/DD/YYYY')

Answer 6

ossek 解决方案的进化版

自定义过滤器更合适，然后您可以在项目的任何位置使用它

js 档案

var myApp = angular.module('myApp',[]);

myApp.filter('utcdate', ['$filter','$locale', function($filter, $locale){

    return function (input, format) {
        if (!angular.isDefined(format)) {
            format = $locale['DATETIME_FORMATS']['medium'];
        }

        var date = new Date(input);
        var d = new Date()
        var _utc = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
        return $filter('date')(_utc, format)
    };

 }]);

模板

中的

<p>This will convert UTC time to local time<p>
<span>{{dateTimeInUTC | utcdate :'MMM d, y h:mm:ss a'}}</span>

Answer 7

经过一些研究后，我能够找到一个很好的解决方案，将UTC转换为当地时间，看看小提琴。希望有所帮助

https://jsfiddle.net/way2ajay19/2kramzng/20/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
  {{date | date:'yyyy-mm-dd hh:mm:ss' }}
</div>


<script>
function MyCtrl($scope) {
 $scope.d = "2017-07-21 19:47:00";
  $scope.d = $scope.d.replace(" ", 'T') + 'Z';
  $scope.date = new Date($scope.d);
}
</script>

Answer 8

是否可以按以下方式声明过滤器？

peerDependencies

Answer 9

您还可以为您的日期编写自定义过滤器，以UTC格式显示。请注意，我使用了toUTCString()。

var app = angular.module('myApp', []);

app.controller('dateCtrl', function($scope) {
    $scope.today = new Date();
});
    
app.filter('utcDate', function() {
    return function(input) {
       return input.toUTCString();
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  
<div ng-app="myApp" ng-controller="dateCtrl">      
    Today is {{today | utcDate}}       
</div>

Answer 10

如果您使用的是.Net，请在

的web.config中添加以下内容

<system.web>

将解决您的问题：

<globalization culture="auto:en-US" uiCulture="auto:en-US" />

使用带有UTC日期的AngularJS日期过滤器

10 个答案: