angularjs时刻解析格式

时间:2016-12-30 15:33:04

标签: javascript angularjs datetime momentjs angular-moment

我有一个ng-repeat,显示以下表达式

{{date}} // 2-1-2017

当我使用角度力矩时

{{date | amDateFormat:'DD'}} 

我得到1,我期待2.如何让我知道我的格式在视图中实际上是dd-mm-yyyy而不是mm-dd-yyy?我不想在我的控制器级解析它,因为它很复杂。

4 个答案:

答案 0 :(得分:3)

根据文档,AngularJs有一个内置的filter for date,可用于以下集合:

{{ date_expression | date : format : timezone}}

这样你就可以像:

一样使用它
{{ date | date:'dd-MM-yyyy'}}

但是,如果你使用时刻的日期过滤器,它必须是一个时刻日期(即定义了时区的完整日期)对象,你可以用与角度相同的方式过滤它。

{{ date | amDateFormat:'dd-MM-yyyy' }}

答案 1 :(得分:3)

如果您的输入是:

,您可以使用内置角度filter for date(如其他答案所示)
  • JavaScript日期对象
  • 表示毫秒的数字(也可以是字符串)
  • ISO 8601格式的字符串(例如yyyy-MM-ddTHH:mm:ss.sssZyyyy-MM-dd等)

您的date是一个格式为 ISO 8601的字符串,因此您必须更改将2-1-2017解析为日期的方式。

您可以使用moment(String, String)在控制器中解析字符串,如以下示例所示:

angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
  $scope.dates = [
    // Wrong way to parse string
    moment('2-1-2017').toDate(),
    // Parse string specifying format
    moment('2-1-2017', 'D-M-YYYY').toDate()
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>

<div ng-app="MyApp" ng-controller="AppCtrl">
  <div ng-repeat="date in dates">
    <span>angular-moment: {{date | amDateFormat:'DD'}}</span>
    <span>angular date filter: {{date | date:"dd"}}</span>
  </div>
</div>

如果您不想修改控制器,可以使用角度矩amParse滤镜。正如文档所说,这个过滤器:

  

将自定义格式的日期解析为可以与am-time-ago指令和其他过滤器一起使用的时刻对象。

因此,在您的情况下,您可以使用以下示例中显示的代码:

angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
  $scope.dates = [
    '2-1-2017', // February 2 2017
    '15-1-2017' // January 15 2017
  ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>

<div ng-app="MyApp" ng-controller="AppCtrl">
  <div ng-repeat="date in dates">
    <span>angular-moment: {{date | amParse:'D-M-YYYY' | amDateFormat:'DD'}}</span>
  </div>
</div>

答案 2 :(得分:1)

我认为您的问题可能与您构建日期对象的方式有关

new Date("2-1-2017") ; // Wed Feb 01 2017

如果我这样做,1指的是当天,这是正确的。 日期过滤器根据收到的对象解析日期,您应该为输入日期查找正确的日期格式。

答案 3 :(得分:0)

您应该使用角度滤镜,例如:

{{date | date:'dd-MM-yyyy'}}