Ionic 6 ion-datetime issue when using zoned time (time zone)

2.1k views Asked by At

We are trying to use local time in new ion-datetime (Ionic 6). We have followed the instructions from Ionic's documentation on how to convert from UTC to zoned time:

getZonedTime(date: Date) {
  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const zonedTime = utcToZonedTime(date, userTimeZone);
  return tzFormat(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
}

But we get two type errors:

TypeError: Cannot destructure property 'month' of 'parseDate(...)' as it is undefined.
    at Datetime.processValue (ion-datetime_3.entry.js:1523:15)
    at Datetime.componentWillLoad (ion-datetime_3.entry.js:1789:10)

and

TypeError: Cannot read properties of undefined (reading 'month')
    at isSameDay (ion-datetime_3.entry.js:30:44)
    at getCalendarDayState (ion-datetime_3.entry.js:961:20)
    at ion-datetime_3.entry.js:1910:72
    at Array.map (<anonymous>)
    at Datetime.renderMonth (ion-datetime_3.entry.js:1907:108)
    at ion-datetime_3.entry.js:1931:19

We have already tried with all possible ion-datetime's properties. Currently, our template is:

<ion-popover trigger="datetime-popover" show-backdrop="true" size="cover">
  <ng-template>
    <ion-datetime #datetimePopover
      [value]="date"
      presentation="date-time">
    </ion-datetime>
  </ng-template>
</ion-popover>

'date' comes from the getZonedTime() function I mentioned previously, e.g. '2022-04-08 17:35:52-03:00'.

Any ideas?

0

There are 0 answers