Wie aktualisierst du das Modell aus der Direktive in Angular 2?

Question

Wie aktualisiere ich mein Modell beim Wechsel von Jquery Datepicker? Wenn ich die Modellaktualisierungen manuell in die <input> eingeben, wird das Modell jedoch nicht aktualisiert, nachdem ich eine Auswahl aus dem Jquery Datepicker-Popup getroffen habe. Der Wert <input> wird mit dem ausgewählten Datum aktualisiert, das Modell ändert sich jedoch nicht.

Ich habe versucht, die Datepicker() in einem Timeout zu wickeln, aber das funktioniert auch nicht. Wie kann ich das Modell auf die Änderung der Richtlinie aufmerksam machen?

Eingang in der Komponente Vorlage:

<input type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker> 

Richtlinie:

@Directive({ 
    selector: '[datepicker]' 
}) 
export class DatePickerDirective { 
    constructor(el: ElementRef) { 
    $(el.nativeElement).datepicker(); 
    } 
} 

Answer 1

[(ngModel)] Updates foreigndate wenn input gebrannt wird, was nicht der Fall zu sein scheint, wenn picker den Wert aktualisiert.

http://api.jqueryui.com/datepicker/ liefert keine Informationen über Ereignisse, die ausgelöst werden, wenn sich der Wert ändert.

Wenn es würden Sie diese Abhilfe verwenden könnte

<input type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker (someEvent)="foreigndate=$event.target.value"> 

Anhören der change Ereignis könnte diese Art und Weise einen Versuch wert sein.

Ansonsten sollte diese

<input #datepicker type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker> 

@ViewChild('datepicker') datePicker:ElementRef; 

ngDoCheck() { 
    this.foreigndate = this.datePicker.nativeElement.value; 
}