Question

目前我在视图中有以下绑定：

<p>{{claim.date}}</p>

其中包含以下内容：

Oct 19, 2015 4:34:00 PM

我想格式化它，使其显示如下：

Oct 19, 2015

查看所有AngularJS日期过滤器，我发现我需要这样做：

<p>{{claim.date | date : 'mediumDate'}}</p>

但是没有发生任何事情。我这样做了吗？

Answer 1

var app = angular.module("App", []);
app.controller("Ctrl", function($scope) {
  $scope.date = "Oct 19, 2015 4:34:00 PM";
  $scope.date2 = new Date("Oct 19, 2015 4:34:00 PM");
});

app.filter('stringToDate', function() {
  return function(input) {
    return new Date(input);
  };
});

app.filter('stringToDateFormat', function($filter) { 
  return function(input, format) { 
    return $filter("date")(new Date(input), format);
  }; 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="App" ng-controller="Ctrl">
  <div>
    {{date | stringToDate |date: "mediumDate"}}
  </div>
    <div>
    {{date | stringToDateFormat: "mediumDate"}}
  </div>
  <div>
    {{date2 | date: "mediumDate"}}
  </div>

</body>

Answer 2

检查下面的代码段。它适用于日期对象。确保您的对象为date object，而不是string。

＆＃13;

angular.module('myApp', []).controller('MyCtrl', function($scope) {
  $scope.date = new Date();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <p>{{date}}</p>
  <p>{{date | date : 'mediumDate'}}</p>
</div>

＆＃13;

AngularJS日期过滤器不会产生结果

2 个答案: