ngModel not working in Angular

Date and time pickers
1

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?

2

Hi @Loren_Cronin :wave:

I’ve checked the shared code, and I noticed that your using the onChange event.

When the onChange event is used the selected value needs to be updated manually:

onChange: (ev: MbscDatepickerChangeEvent) => {
  this.selectedDate = ev.value;
}

If you don’t need to handle the value change manually, after removing the onChange option the ngModel value update should work out of the box.

Let me know if this helps!