Angular 2: JQuery UI Datepicker ändert sich nicht ngModel

Question

Ich habe JQuery UI's Datepicker funktioniert in meiner eckigen 2 Anwendung, aber es aktualisiert nicht meine ngModel. Ich habe eine Variable namens SeasonStartDate, die ich zu dem Datum aktualisieren möchte, das der Benutzer eingibt. Wenn ich ein Datum in meiner Datumsauswahl, also zum Beispiel 31. Oktober, wähle, wird meine Eingabe mit dem 31.10.2016 gefüllt, wie ich es erwarten würde, aber ngModel wird nicht erfolgreich aktualisiert.

Hier ist meine Eingabe:

<input [ngModel]="SeasonStartDate" (ngModelChange)="updateSeasonStartDate($event)" class="form-control date-picker" id="SeasonStartDate" name="SeasonStartDate" type="text" autocomplete="off"> 
Date: {{SeasonStartDate}} 

Ich habe Date: {{SeasonStartDate}} unter dem Eingang, so kann ich testen, ob der Wert zu aktualisieren ist. Hier

ist der Code in meiner Komponente, die den Wert aktualisiert:

updateSeasonStartDate(updateSeasonStartDate: any) { 
    console.log(updateSeasonStartDate); 
    this.SeasonStartDate = updateSeasonStartDate; 
} 

Wenn ich entfernen Sie die date-picker Klasse (die die Datumsauswahl starten benötigt wird) und ich tippe einfach manuell im Eingang, SeasonStartDate wird Update wie erwartet, damit ich weiß, der Rest meines Codes funktioniert, es ist nur die Datumsauswahl, die es endet zu brechen. Wie kann ich ngModel und JQuery UI Datepicker zusammenarbeiten lassen? Ist das möglich? Ich weiß, es gibt andere Datumsauswahlprogramme speziell für Angular 2, aber ich bevorzuge JQuerys Version, wenn möglich.

Answer 1

Dies ist vielleicht nicht die eleganteste Lösung, aber ich habe einen Weg gefunden, dies zum Laufen zu bringen.

Zuerst habe ich meine Eingabe aktualisiert aussehen wie folgt:

<input [(ngModel)]="SeasonStartDate" #startDate (click)="updateSeasonStartDate(startDate.value)" class="form-control date-picker" id="SeasonStartDate" name="SeasonStartDate" tabindex="5" type="text" autocomplete="off"> 

Die wesentlichen Änderungen sind die Zusätze von #startDate und (click)="updateSeasonStartDate(startDate.value)"

Dieses sagt, wenn Sie diese Eingabe klicken, rufen Sie updateSeasonStartDate() und Pass in was auch immer der aktuelle Wert der Eingabe ist. Nun, das alleine gibt mir nicht die gewünschten Ergebnisse, weil ich den Wert der Eingabe an meine SeasonStartDate Variable jedes Mal binden möchte, wenn ein neues Datum eingegeben wird, nicht nur wenn die Eingabe angeklickt wird, weshalb ich auch den folgenden Code hinzugefügt habe zur ngOnInit Funktion:

$('body').on('change', '#SeasonStartDate', function() {  
    $('#SeasonStartDate').trigger('click'); 
}); 

nun der Wert dieser Eingangsänderungen zu jeder Zeit, wird updateSeasonStartDate() aufgerufen und SeasonStartDate ändern, nur wie ich will. Dies ist definitiv ein hacky Arbeit, und Sie könnten sich wundern, warum ich nicht einfach (change) anstelle von (click) in meine Eingabe gesetzt habe. Das liegt daran, dass das Ereignis (change) aus irgendeinem Grund nicht registriert wird, wenn sich der Wert der Eingabe bei der Verwendung von JQuery Date Picker geändert hat. Ich weiß nicht, ob das ein Bug mit Angular 2 ist oder ob es ein beabsichtigtes Verhalten ist, aber es ist der einzige Weg, wie ich es zum Laufen bringen kann.

Wenn jemand bessere Lösungen hat, lass es mich wissen und ich werde deine Antwort stattdessen akzeptieren.

Answer 2

Wenn Sie die Änderung der Eingabe nicht wirklich erkennen müssen und stattdessen den Wert benötigen, wenn ein Ereignis auftritt, können Sie ViewChild verwenden, um den Wert Ihrer Datumsvariable zu aktualisieren, wenn dieses Ereignis eintritt.

Zum Beispiel in meinem Fall, wenn ich das Formular absende, habe ich den Wert des Datums festgelegt.

Mein Eingang:

<input type="text" id="date-picker-example" #dateclass="form-control pickadate" #date> 

Ich benutze ViewChild und dies ist mein Eingang Erklärung:

@ViewChild('date') 
dateVariable: any; 

Dann, wenn einreichen auftritt:

submit(){ 
    this.myRealDateVariable = this.resolveDate(this.dateVariable.nativeElement.value); 
    //Rest of the code here calling an http service 
} 

Answer 3

Wenn Sie jQueryUI picker verwenden , können Sie dem Datepicker mitteilen, was im Ereignis OnSelect zu tun ist. Geben Sie ihm eine Funktion, die das ausgewählte Datum dem Modell zuweist.

 $('#SeasonStartDate').datepicker({ 
     onSelect: (selectedDate, inst) => { 
      this.SeasonStartDate= selectedDate; 
     } 
    });