MobiScroll date picker not setting ngModel value

I’m trying to get mbsc-datepicker working, and the [(ngModel)] doesn’t seem to be working and I have no idea why. This is what I’ve got in place:

In my HTML:

<input type="text" class="form-control form-control-sm bg-white datepicker" placeholder="Select a date..." id="mbsc-control-0" name="selectedDate" readonly mbsc-datepicker [mbscOptions]="dateOptions" [(ngModel)]="selectedDate" />


In my component:

selectedDate: string;
dateOptions: MbscDatepickerOptions = {
controls: ['calendar'],
theme: 'ios',
themeVariant: 'light',
touchUi: true,
returnFormat: 'locale',
dateFormat: 'M/D/YYYY',
headerText: 'Select a date',
onChange: (ev: MbscDatepickerChangeEvent, inst: any) => {
},
onClose: () => {
}
};


Whenever I change the date, “selectedDate” is not updated. What am I missing? I’m using Angular 18.2.0 and @mobiscroll/angular 5.32.1. I’d rather not have to set the value in onChange(), as it makes it harder to re-use the options for multiple controls on one page. Any other ideas?

Continue reading...