如何在ng模型中使用日期過濾器？

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

日期未格式化，但看起來是這樣的： 星期三2014年9月24日7時40分02秒GMT-0700（太平洋夏令時間）

最後，我想輸入文本框綁定到這個值和過濾這樣的：

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

我希望，一旦我得到了簡單的版本的工作，我可以得到我的實際PR用文本輸入解決問題。

這裏是一個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

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

，但你不能使用過濾器內輸入到裏面輸入甲酸日期請參見這裏

Using angularjs filter in input element

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

Answer 3

在$ scope.MyDate請

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

Answer 4

我只做讓你的新節目的日期替換它，您可以在值中使用的過濾器。

Answer 5

您可以更改日期格式這樣

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