2014-09-24 7 views
10

Dies scheint wie es sollte einfach sein, aber es ist mir entgangen. Ich möchte meine Datumszeichenfolge in ein Datumsobjekt konvertieren und filtern, wie es angezeigt wird.Wie verwende ich einen Datumsfilter in ng-Modell?

Ich habe einen einfachen Winkel App und Controller

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

Ich habe JSON vom Server und Datum zurück mit denen ich arbeite ist eine Zeichenfolge in dem obigen Format

aus dem Winkel Dokumentation über date filters

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

das funktioniert und das löschte ist: 28. Oktober 2010 08.40.23

Wenn ich versuche, die Filter auf $ scope.MyDate wie folgt zu verwenden:

{{MyDate | date:'medium'}} 

das Datum nicht formatiert ist, sondern sieht wie folgt aus: Mi 24. September 2014 07.40.02 GMT-0700 (Pacific Daylight Time)

Schließlich würde ich mag ein Texteingabefeld auf diesen Wert binden und es so filtern:

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

ich einmal bin die Hoffnung, bekomme ich die einfache Version arbeiten kann ich meine eigentliche pr bekommen Problem gelöst mit der Texteingabe.

Hier ist ein plunker with the above code

Antwort

14

Für den ersten Teil, verwenden new Date() statt:

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

Zweitens Sie eine Richtlinie erstellen kann das Modell in der input (modifiziert nach here)

zu formatieren

Das Markup ist wie folgt:

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

und die Richtlinie ist wie:

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 aktualisiert Siehe

+0

groß dieser ist. Kann es eine Erweiterung zur Validierung der Daten geben? – Kangkan

4

in Ihrem $ scope.MyDate ersetzen Sie es bitte mit

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

ich Ihnen nur ein Datum neue Show, können Sie einen Filter in Wert verwenden.

0

Sie können das Datumsformat ändern wie diese

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

Verwandte Themen