Question

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

理想情况下，我想要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)");

出了什么问题，如何解决这个问题？角度版本1.2.26。

Answer 1

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

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

另请注意，我在那里直接堵塞了时刻（有时区支持），但是有一些不同的包装用于提供它作为更多角度的服务和/或指令 - 指明分数＆＃39;方式。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

Answer 3

试试这个..

    <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

Answer 4

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

将其更改为
“EEE MMM dd yyyy HH：mm：ss”

请参阅angular documentation。

Answer 5

我不确定你是如何获得03-31-2016的。但看起来你的过滤器非常接近。 DD应为dd。 YYYY应为yyyy。 M中的GMT需要使用单引号进行转义。此外，您似乎没有指定时区。您应该在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

Answer 6

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

.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)' }}

请清理浏览器的缓存。

结果

Thu Mar 31 2016 16:05:00 AD3T +1100（EDT）

按日期返回的角度滤波器mm-dd-yyyy

6 个答案: