Angular 2: jQuery UI Datepicker not changing ngModel

Question

I have a jQuery UI datepicker working in my angular 2 application, however it does not update mine ngModel. I have a variable called SeasonStartDatethat I want to update to any date that the user enters. When I select a date in my date picker, therefore, for example, October 31, my entry will be filled on 10/31/2016, as expected, but ngModelwill not be updated successfully.

Here is my input:

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

I added Date: {{SeasonStartDate}}under the tab so that I can check if the value is updated.

Here is the code in my component that updates the value:

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

If I delete the class date-picker(which is needed to initialize the date selection) and I just manually enter the input, it SeasonStartDatewill update as expected, so I know that the rest of my code works, it's just a date picker that finishes it. How can I get ngModelJQuery UI and Datepicker to work together? Is it possible? I know that there are other date pickers specifically for angular 2, but I prefer the jQuery version if possible.

Answer 1

This may not be the most elegant solution, but I found a way to make this work.

First, I updated my input to look like this:

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

Important changes are additions #startDateand(click)="updateSeasonStartDate(startDate.value)"

, , updateSeasonStartDate() . , SeasonStartDate , , , ngOnInit:

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

, , updateSeasonStartDate() SeasonStartDate , . , , , , (change) (click) . , - (change) JQuery Date Picker. , Angular 2, , .

- , , .

Answer 2

JqueryUI datepicker, datepicker, onSelect. fuction, .

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

Answer 3

If you really don't need to detect a change in input and instead need a value when an event occurs, you can use ViewChild to update the value of the date variable for this event.

For example, in my case, when I submit the form, I set the date value.

My input:

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

I am using ViewChild and this is my input declaration:

@ViewChild('date')
dateVariable: any;

Then, when the transfer is in progress:

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