Angular 2 – ngModel not updated from datepicker

Issue

I have an input that is bound to a value in the model.

     <input type="text" class="form-control" [(ngModel)]="currentDate">

I have a datepicker that I use to populate this input. When a value is chosen from via the datepicker the input does not seem to update the model as its not firing a pipe farther down in the code.

However, if I manually type into the input field then the the ngModel does seem to update as the pipe then fires to filter based on the new value. I have bound an ‘on change’ handler to the input, which fires when typing or when using the datepicker.

    $('#datepicker').datepicker().on('changeDate', function(e){
        //Fires on change
    })

Is there a way to trigger the ngModel change event manually, or is there more elegant solution someone else is aware of?

Solution

Using the datepicker’s own events I was able to just manually update the model value.

AttachDateChangeHandler(): void {
    $('#datepicker').datepicker().on('changeDate', (e)=> {
        this.currentDate = e.date.***()
    })
}

Thanks to Madhu Ranjan for the suggestion.

Answered By – Tekk_Know

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.