如何在 ng-model 中使用日期过滤器？答案

【问题标题】：How do I use a date filter in ng-model?如何在 ng-model 中使用日期过滤器？
【发布时间】：2014-11-19 03:29:24
【问题描述】：

这似乎应该很简单，但它却让我望而却步。我想将我的日期字符串转换为日期对象并过滤它的显示方式。

我有一个简单的 Angular 应用程序和控制器

myApp.controller('myAppCtrl', function($scope) {
   $scope.MyDate = Date("2014-09-23T15:26:49.1513672Z");
})

我从服务器返回了 JSON，我正在使用的日期是上述格式的字符串

来自关于date filters的角度文档

  <span>{{1288323623006 | date:'medium'}}</span><br>

这行得通，输出是： 2010 年 10 月 28 日晚上 8:40:23

当我尝试在 $scope.MyDate 上使用过滤器时，如下所示：

  {{MyDate | date:'medium'}}

日期未格式化，但如下所示： 2014 年 9 月 24 日星期三 07:40:02 GMT-0700（太平洋夏令时间）

最终我想将一个输入文本框绑定到这个值并像这样过滤它：

<input type="text" class="form-control" ng-model="MyDatee | date:'medium'"/>

我希望一旦我得到简单的版本，我可以通过文本输入解决我的实际问题。

这是plunker with the above code

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您可以像这样更改日期格式

<input type="text" class="form-control" value="{{MyDatee | date:'medium'}}"/>

【讨论】：

【解决方案2】：

http://plnkr.co/edit/6Se6Cv6ozF0B7F0X6gjl?p=preview

但您不能在输入中使用过滤器来格式化输入中的日期，请参见此处

Using angularjs filter in input element

 $scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");

【讨论】：

【解决方案3】：

对于第一部分，请改用new Date()：

$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");

其次，可以在input中创建一个指令来格式化模型（修改自here）

标记是这样的：

<input type="text" class="form-control" ng-model="MyDate" formatted-date format="medium" />

指令是这样的：

angular.module('myApp').directive('formattedDate', function(dateFilter) {
  return {
    require: 'ngModel',
    scope: {
      format: "="
    },
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return dateFilter(data, scope.format); //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return dateFilter(data, scope.format); //converted
      });
    }
  }
});

查看更新的plunkr

【讨论】：

这很棒。是否也可以扩展来验证数据？

【解决方案4】：

在您的 $scope.MyDate 中，请将其替换为

$scope.MyDate = new Date("2014-09-23T15:26:49.1513672Z");

【讨论】：