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

4

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

5

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

6

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

7

I faced the same issue . But I have two input that using the Date format. One is “date-from” and another one is “date-to”. Which code should I amend to get both date works ?

8

is anyone have the solution. I am struggling now to find the solution. I cannot even update the angular. Its turn up an error.