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

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

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

Hello @pilotman. Did you find a solution for it?

Hey @jeetuchoudhary I ended up doing something like this:

.html file

  <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 [showDefaultButtons]="true"
          #popoverDatetime
          presentation="date" value="{{date}}"
          (ionChange)="date = popoverDatetime.value;">
        </ion-datetime>
      </ng-template>
    </ion-popover>
  </ion-item>

in the .ts file:

public dateValue: any;

async ionViewDidEnter() {
this.date = this.dataObject.Date;
}

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

  set date(value: any) {
    value = moment(value).format('YYYY-MM-DD');
    this.dateValue = value;
  }

Other/ better ways may exist but this worked for me

Thanks, @pilotman. I have switched to the newly introduced Ion-datetime-button with an inline modal.