Question

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

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

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

日期未格式化，但看起来像这样： Wed Sep 24 2014 07:40:02 GMT-0700（Pacific Daylight Time）

最终我想将输入文本框绑定到此值并按以下方式对其进行过滤：

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

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

这是plunker with the above code

Answer 1

对于第一部分，请改用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

Answer 2

你的$ scope.MyDate中的

请用

替换它

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

Answer 3

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

但您可以在输入中使用过滤器来格式化输入内的日期，请参阅此处

Using angularjs filter in input element

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

Answer 4

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

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

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

4 个答案: