Ionic v6: ion-datetime clean way to pass UTC to local in UI?

Ionic Framework
1

Hi All, as per below link in Ionic V6, ion-datetime makes no assumption about local times. We must pass into the model as the local time we want.

My question is can anyone help me find a clean way to pass UTC time as local time into the picker?

I think I know how to then convert back to UTC using the example in the ionic documents.

Example of UTC time I am working with:

2021-12-16T18:54:00+00:00

For the purpose of the example I use moment to convert to and from local time:

eg
moment(testDate).local();

                      <ion-item class="ion-text-wrap" button="true" id="ionic-date-contact-start">
                        <ion-icon name="calendar" slot="start"></ion-icon>
                          <ion-label style="color:#424242">Start Date</ion-label>
                          <ion-text>{{testDate|date:'mediumDate'}}</ion-text>
                        <ion-popover trigger="ionic-date-contact-start" show-backdrop="false">
                          <ng-template>
                            <ion-datetime
                              #popoverDatetime
                              presentation="date"
                              [(ngModel)]="testDate"
                              (ionChange)="testDate = formatDate(popoverDatetime.value)"
                              [showClearButton]="true"
                            ></ion-datetime>
                          </ng-template>
                        </ion-popover>
                      </ion-item>

formatDate(value) {
    return moment(value);
}
2

FYI, if you aren’t aware, Moment.js is no longer an active project - reference.

I am using date-fns and it’s parseISO method to set IonDatetime to the user’s local timezone.

import { format, parseISO } from 'date-fns'

formatDate(value) {
  return format(parseISO('2021-12-16T18:54:00+00:00'))
}
2 Likes
3

Thanks moment was only for the purpose of the example ( I actually use DayJs).

Appreciate the solution, I’ll try this out. With your solution when i go to sync the data will I need to change the format back to the UTC timezone?

Will try to see if I can use the formatDateToLocal function on NgModel so it only changes the value parsed to the picker but leaving the sync value alone.

4

It looks like Ionic gives an ISO8601 format with the timezone offset 2022-01-17T18:31:00-05:00.

I use the ion-change event on the date picker to store it the way I need to.

You could do the following:

handleTimeChange(event: DatetimeCustomEvent): void {
  const datetimeValue = event.detail.value ?? ''
  
  if (datetimeValue !== '') {
    const utcDateTime = parseISO(datetimeValue).toISOString() // Gives ISO8601 with no offset
  }
}
5

Hi,
I’m able to handle local/UTC times once the value is changed (with ionChange).
But is there any method to display the default value of the timepicker in UTC ? The picker shows the local time, for my purpose it would be easier for the user to have directly the picker showing present time in UTC. Is it possible ? It was, in ionic5…