Angular 2: JQuery UI Datepicker not changing ngModel

Question

I have JQuery UI's datepicker working in my angular 2 application, however it is not updating my ngModel. I have a variable called SeasonStartDate, which I want to update to whatever date the user inputs. When I select a date in my date picker, so October 31st for example, my input will fill with 10/31/2016, as I would expect, but ngModel isn't successfully updating.

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}} below the input so I can test whether or not the value is updating.

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

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

If I remove the date-picker class (which is needed to initiate the date picker) and I just manually type in the input, SeasonStartDate will update as expected, so I know the rest of my code works, it's just the date picker that ends up breaking it. How can I get ngModel and JQuery UI Datepicker to work together? Is this possible? I know there are other date pickers out there specifically for Angular 2, but I prefer JQuery's version if possible.

Answer 1

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

First, I updated my input to look like the following:

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

The important changes are the additions of #startDate and (click)="updateSeasonStartDate(startDate.value)"

This says, when you click this input, invoke updateSeasonStartDate() and pass in whatever the current value of the input is. Now that alone won't give me the desired results, because I want to bind the value of the input to my SeasonStartDate variable anytime a new date is entered, not just when the input is clicked, which is why I also added the following code to the ngOnInit function:

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

Now anytime the value of that input changes, updateSeasonStartDate() will be invoked and change SeasonStartDate just like I want. This is definitely a hacky work around, and you might be wondering why I didn't simply put (change) instead of (click) in my input. That's because for whatever reason, the (change) event wouldn't register when the value of the input changed while using JQuery Date Picker. I don't know if this is a bug with Angular 2, or if it is intended behavior, but it's the only way I could get it to work.

If anyone has better solutions, please let me know and I will accept your answer instead.