Aktualisierung Eingangswert nach Modell binden

Question

ich eine Texteingabe Zweiwege haben eine Eigenschaft Date Typ-Modell gebunden:

<input type="text" [(ngModel)]="model.DateStart" ngControl="dateStart" id="dateStart" #dateStart /> 

Die model.DateStart (Datetime-Typ) Wert ist dies:

2016-05-24T13:49:40.4367997+03:00 

Welche Ich möchte so angezeigt werden:

24.05.2016 

Ich befüllen Modelldaten im Konstruktor und nach Bindung das Modell ing ich den Eingangswert mit jQuery aktualisieren:

Observable.forkJoin(
       .. 
     ).subscribe(
      results => { 
       this.model = results[0]; 

       let element: any = $(input); 
       element.bootstrapMaterialDatePicker(); 
       element.val("24.05.2016"); 
       console.log(element.val()) // displays "24.05.2016" 
      }, 

Die Sache ist, wenn die Seite der Textbox angezeigt 2016-05-24T13:49:40.4367997+03:00 lädt.

Es scheint, dass mein benutzerdefiniertes Format danach überschrieben wird. Gibt es eine Möglichkeit, dies zu erreichen, ohne den Typ des model.DateStart vor dem Binden zu string und formatieren?

Ich kann Eingabe Typ = Datum wegen der Datetime-Picker-Komponente nicht verwenden.

Answer 1

try this: ein eigenes Rohr erstellen, die Sie das Datum als Argument nehmen und zurück ein Format, was Sie wollen also

import {Pipe} from "angular2/core"; 

@Pipe({ 
    name : "formatDate" 
}) 

export class FormatDatePipe{ 
    transform(value){ 
     var date_data = new Date(value); 

     var yyyy = date_data.getFullYear().toString(); 
     var mm = (date_data.getMonth()+1).toString(); // getMonth() is zero-based 
     var dd = date_data.getDate().toString(); 

     return yyyy +"-"+ (mm[1]?mm:"0"+mm[0]) +"-"+ (dd[1]?dd:"0"+dd[0]); // returns 2016-05-16 
    } 
} 

dann in Ihrem Anzeigeelement tun:

{{modal.DateStart|formatDate}} 

Ich hoffe, Sie verstehen, wie man benutzerdefinierte Rohre schreibt; Wenn nicht, dann verwenden Sie this als Referenz