按日期返回 mm-dd-yyyy 的角度过滤器答案

【问题标题】：Angular Filter by Date Returning mm-dd-yyyy按日期返回 mm-dd-yyyy 的角度过滤器
【发布时间】：2015-05-11 10:18:43
【问题描述】：

我正在控制器中运行过滤器，但无法正确过滤日期。

理想情况下我想要这个Thu Mar 31 2016 05:05:00 GMT-0400 (EDT)。

但是，当我运行代码时，results 等于 03-31-2016。

我的控制器中的代码

$scope.date = "2016-03-31T05:05:00Z";

var results = $filter('date')($scope.date, "EEE MMM DD YYYY HH:mm:ss GMT Z (EDT)");

出了什么问题，我该如何解决？ Angular 版本1.2.26。

【问题讨论】：

根据您对以下答案的回复，您的问题似乎与 $filter 服务无关。请竖起小提琴。

标签： javascript angularjs date filter

【解决方案1】：

以下使用过滤器演示它，或者使用允许更好的时区和格式控制的momentjs。

请注意，angularjs 过滤器仅限于使用浏览器的时区运行。

还请注意，我已经将 momentjs（支持时区）直接插入其中，但是有一些不同的包装器可以以更“角度化”的方式将其作为服务和/或指令提供。

(function() {
  
  "use strict";
  
  angular.module("app", [])
    .controller("ctrl1", ["$scope", "$filter", CtrlOne])
    .controller("ctrl2", ["$scope", "$filter", "$window", CtrlTwo]);

  function CtrlOne($scope, $filter) {
    // See 'Timezones' at bottom of: https://code.angularjs.org/1.2.26/docs/guide/i18n
    // Basically, using filter will always use the timezone of the browser, so hard-
    // coding '(EDT)' will be incorrect for anyone not in your timezone.
    $scope.date = "2016-03-31T05:05:00Z"; //Note that 'Z' means UTC 0
    $scope.results = $filter('date')($scope.date, "EEE MMM dd yyyy HH:mm:ss 'GMT'Z '(EDT)'");
  }

  function CtrlTwo($scope, $filter, $window) {
    // MomentJS with timezones allows you to specify timezones, and provides more formatting options.
    // Also, note that the date string being formatted below uses -04:00 instead of Z to indicate its timezone.
    // See: http://en.wikipedia.org/wiki/ISO_8601#Time_zone_designators
    var moment = $window.moment;
    $scope.results = moment.tz("2016-03-31T05:05:00-04:00", "America/New_York").format("ddd MMM DD YYYY HH:mm:ss [GMT]Z [(]z[)]");
  }
})();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://momentjs.com/downloads/moment-timezone-with-data-2010-2020.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl1"><strong>angular filter</strong>, will only be correct for browsers in EDT:<br />{{results}}</div>
  <br />
  <div ng-controller="ctrl2"><strong>momentjs</strong> allowing some timezone control and better formatting:<br />{{results}}</div>
</div>

【讨论】：

【解决方案2】：

您的过滤器不正确。使用这个

angular.module("app", []).controller("ctrl", ["$scope", "$filter", function ($scope, $filter) {
    $scope.date = "2016-03-31T05:05:00Z";
    $scope.results = $filter('date')($scope.date, "yyyy-MM-ddTHH:mm:ss.sssZ");
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl">{{results}}</div>
</div>

【讨论】：

格式与用户要求的格式不同，但在我的编辑下，它就像一个魅力！ +1 是因为我欣赏这种风格

【解决方案3】：

我不确定您是如何获得03-31-2016 的。但看起来你的过滤器非常接近。 DD 应该是 dd。 YYYY 应该是 yyyy。而GMT 中的M 需要用单引号转义。此外，您似乎没有指定时区。您应该在Z 之后指定一个时区或删除Z。

var result = $filter('date')("2016-03-31T05:05:00", "EEE MMM dd yyyy HH:mm:ss G'M'TZ (EDT)", "");
console.log(result);

Thu Mar 31 2016 05:05:00 GMT-0400 (EDT)

JS Fiddle

【讨论】：

当我在浏览器中运行代码时，我仍然收到03-31-2016。我文件中的代码是console.log($filter('date')("2016-03-31T05:05:00Z", "EEE MMM dd yyyy HH:mm:ss G'M'TZ (EDT)"));
您使用的是哪个版本的 Angular？您的代码可以与 JSFiddle 一起使用吗？
1.2.26。我直接从 JSFiddle 复制。

【解决方案4】：

试试这个..

    <div ng-app="sampleapp">
<div ng-controller="samplecontoller" ng-init="init();">
    <div ng-repeat="date in dates" class="dateformatter">

<span><strong>Date</strong> : {{ date.date1 }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat }}</span>
<span><strong>Date Format</strong> : {{ date.date1 | dateFormat1 }}</span>
<span><strong>Time Format</strong> : {{ date.date1 | time }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime }}</span>
<span><strong>Date time Format</strong> : {{ date.date1 | datetime1 }}</span>

    </div>
    </div>
</div>

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

myapp.controller('samplecontoller', function ($scope ,$interval ) {

    $scope.init = $interval(function(){

    var date = new Date();
    $scope.dates = [{ "date1" : date }]

     },100 )

});
myapp.filter('dateFormat', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'MMM dd yyyy');

  return _date.toUpperCase();

 };
});
myapp.filter('dateFormat1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'MM dd yyyy');

  return _date.toUpperCase();

 };
});

myapp.filter('time', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input), 'HH:mm:ss');

  return _date.toUpperCase();

 };
});
myapp.filter('datetime', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input),
                              'MMM dd yyyy - HH:mm:ss');

  return _date.toUpperCase();

 };
});
myapp.filter('datetime1', function($filter)
{
 return function(input)
 {
  if(input == null){ return ""; } 

  var _date = $filter('date')(new Date(input),
                              'MM dd yyyy - HH:mm:ss');

  return _date.toUpperCase();

 };
});

演示：http://jsfiddle.net/prash/Cp73s/323/light/ 参考：http://angulartutorial.blogspot.in/2014/04/date-filtering-and-formatting-in.html

【讨论】：

我在想使用new Date() 可以解决这个问题，但问题仍然存在。将你的代码归结为$filter('date')(new Date(input), 'MM dd yyyy - HH:mm:ss'); 会给我同样的结果。 `

【解决方案5】：

我已经使用下面的代码进行了测试。我想这就是你想要的。

.js 代码：

 var result = $filter('date')('2016-03-31T05:05:00Z', 'EEE MMM dd yyyy HH:mm:ss GMT Z (EDT)');
    console.log(result);

.html

{{dtEmp | date: 'EEE MMM dd yyyy HH:mm:ss GMT Z (EDT)' }}

请清理浏览器的缓存。

结果

2016 年 3 月 31 日星期四 16:05:00 AD3T +1100 (EDT)

【讨论】：

【解决方案6】：

问题在于您的参数“EEE MMM DD YYYY HH:mm:ss”

改成
"EEE MMM dd yyyy HH:mm:ss"

请参阅angular documentation。

【讨论】：