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?