The text input is not updating when the date is changed externally

[pgscada]

If I select a date from the date picker, the input text box is updated to show the selected date. In the example code given below, there are forward and back buttons each side of the day picker which increment and decrement the date to which the datepicker is bound. When the forward and back buttons are clicked the data model is updated (ie currentDate) but not the text shown in the date-picker textbox.

Component HTML view

<button (click)="decrement()">Back<//button> <owl-date-time [(ngModel)]="currentDate" (onSelect)="subscribeToData()" [locale]="fr" dateFormat="D/M/YY" type="calendar" autoClose="true" selectionMode="single" hideClearButton="true" [max]="today"><//owl-date-time> <button (click)="increment()" [disabled]="currentDate > today || currentDate.toDateString() == today.toDateString()">Forward <//button>

Angular2 Component

private increment() {
    this.currentDate.setDate(this.currentDate.getDate() + 1);
    this.subscribeToData();
}
private decrement() {
    this.currentDate.setDate(this.currentDate.getDate() - 1);
    this.subscribeToData();
}

[DanielYKPan]

The reason the text is not updated is because the currentDate is still same object even thought it is +/- a day. You might have to create a new date object and +/- 1 day.