Cannot destructure property 'month' of 'parseDate(...)' as it is undefined. undefined - Ionic Date Picker

Ionic Framework
#1

I have the following datepicker:

  <ion-item>
    <ion-label>Date</ion-label>
    <ion-input
      value="{{ date | date: 'dd-MMM-yyyy' }}"
      id="date"
      class="ion-text-end"
      readonly="true"
    ></ion-input>
    <ion-popover trigger="date" size="cover">
      <ng-template>
        <ion-datetime
          presentation="date"
          [(ngModel)]="date"
        ></ion-datetime>
      </ng-template>
    </ion-popover>
  </ion-item>


  async ngOnInit() {
    this.dateValue = parseISO(this.gblDbFunctions.getTimeStampMySqlFormat());
    // returns string in the format eg - 2022-04-28

  }

  get date(): any {
    return this.dateValue;
  }

  set date(value: any) {
    console.log(JSON.stringify(value));
    this.dateValue = value;
  }

As seen in the code I am trying to set todays date onInit() which populates the input correctly. However when I try to change the date and click on the input to open the picker I get the following error:

Line 2288 - Msg: TypeError: Cannot destructure property 'month' of 'parseDate(...)' as it is undefined. undefined
Line 2288 - Msg: TypeError: Cannot read properties of undefined (reading 'month') [object HTMLElement]

I am wondering how to fix this?

Thanks

#3

Where is date coming from? Is possible that initially is is undefined, so when the datetime try to set the value it gets an undefined car and throws this error. If you can, use ViewChild to access the datetime instead of ngModel