1

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?

Caroline Oliva
  • 21
  • 4
  • 2
    We were finally able to fix this problem. The 'T' was missing in the date format provided to the tzFormat function. We replaced the one in the question ('yyyy-MM-dd HH:mm:ssXXX') by 'yyyy-MM-dd\'T\'HH:mm:ssXXX' and now it's working as expected. We were following ionic's ion-datetime documentation, the line "format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });". Maybe tzFormat requires the 'T' and format doesn't, or maybe the T is also missing in ionic's documentation. – Caroline Oliva May 02 '22 at 15:29

0 Answers0