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

Question

这看起来应该很简单,但它让我望而却步.我想将我的日期字符串转换为日期对象并过滤它的显示方式.

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

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

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

从有关日期过滤器的角度文档

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

这项工作和出局是:2010年10月28日下午8:40:23

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

  {{MyDate | date:'medium'}}

日期没有格式化,但看起来像这样:Wed Sep 24 2014 07:40:02 GMT-0700(Pacific Daylight Time)

最后,我想将输入文本框绑定到此值并按如下方式对其进行过滤:

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

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

这是一个带有上述代码的plunker

Answer 1

对于第一部分,请new Date()改用:

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

其次,你可以创建一个指令来格式化模型input(从这里修改)

标记如下:

<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