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

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:


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

                      <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-popover trigger="ionic-date-contact-start" show-backdrop="false">
                              (ionChange)="testDate = formatDate(popoverDatetime.value)"
formatDate(value) {
    return moment(value);

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'))

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.

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

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…