Wie kann ich den Wert am Eingabedatum mit eckigen laden?

Question

Ich programmiere mit Angular 1.5.5 und ich benutze Materialize CSS 0.97.6. Ich habe dieses Problem.

On-Controller, I $scope.myDate = '2017-01-13T02:06:40' In der HTML-Datei, ich habe <input type='date' class='form-control datepicker' value="{{(myDate | date: 'dd/MM/yyyy')}}">

Aber das Eingabefeld zeigt nichts.

Wenn ich <input type='date' class='form-control datepicker' value="13/01/2017"> setzen, funktioniert es.

Ich habe es getan, um die Variable myDate <div ng-bind="myDate | date : 'dd/MM/yyyy'"></div> zu überprüfen, und es funktioniert auch.

Also kann jeder erklären, warum der Wert nicht zur Eingabe geladen wird, wenn ich die Variable verwende?

Answer 1

Wie bei jeder anderen Eingabe binden Sie den Wert im Eingabefeld mit Ihrem Modell unter Verwendung von ng-model.

Und als documentation says:

Das Modell muss immer ein Date-Objekt sein, sonst Angular wird einen Fehler werfen. Ungültige Date-Objekte (Daten, deren getTime() NaN ist) werden als leere Zeichenfolge gerendert.

Answer 2

Sie können das Datum vom Geltungsbereich an die Eingabe [Datum] mit dem Attribut ng-model übergeben. Sie können die vollständige Dokumentation finden Sie hier: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

In Ihrem Code, müssen Sie myDate zu einem Date-Objekt ändern, nicht Zeichenfolge

$scope.myDate = new Date(2013, 9, 22); 

und auch in der Vorlage, die Eingabe [Datum] wird wie folgt aus:

<input type='date' ng-model="myDate " /> 

Answer 3

Es gibt keine Art und Weise möglich ist, das Format von html5 Eingangsdatum Typ zu ändern, für weitere Informationen unter die vorherige Antwort sehen:

Is there any way to change input type="date" format?

Also, wenn das Format zwingend ist, dass Sie das Datumsauswahl-Popup-Element in Winkel ui.bootstrap Bibliothek zum Beispiel verwenden können, in dem Sie das Format direkt einstellen können, ist dies ihre plunker example:

sonst, wenn das Format nicht zwingend Sie instanziieren gerade ein neues Objekt Datum, und es wird wie folgt funktionieren:

$scope.myDate = new Date('2017-01-13T02:06:40'); 
<input type="date" class="form-control datepicker" ng-model="myDate"> 

oder wenn Sie nicht über die Bearbeitung der Zeitpunkt ist es egal, und Sie wollen es nur zeigen, kann man einfach die Art des Eingangs ändern zu Text und es wird auch funktionieren wie dies:

$scope.myDate = '2017-01-13T02:06:40'; 
<input type="text" class="form-control datepicker" ng-readonly="true" style="background: #ffffff;" value="{{myDate | date: 'dd/MM/yyyy'}}">