Ion-datetime hours value not showing correct Timezone

Ionic Framework Ionic Vue
1

Hello, I followed the new ionic6 component’s doc for ion-datetime but I got a hard time searching how to display my Timezone.

I’m located in France, so I’m in GMT+2, but the time selector never shows the correct hour.
(here is my component)

<ion-datetime slot="content" 
   :presentation="date-time" 
   class="custom-datetime" 
   v-model="selectedDatetime" 
   locale="fr-FR" :first-day-of-week="1">
   <span slot="time-label">Heure</span>
</ion-datetime>

For example, it’s currently 09:23, but the selector shows 07:23, and if I click and then format the result with toLocaleDateString(‘fr-FR’), I finally get the good value, 09:23.

I’d like the time selector to show 09:23 to not confuse my users.
Any idea on how to do that?
Thanks in advance.

2

I searched for the “basic” html element and found out that
<input type="time"> displays my current time by default :

It’d be absolutely perfect if the Ionic component could have the same behavior.

1 Like
3

How is selectedDatetime being initialized?

4

It is a string I get from an API call that I convert to ISO, for example I have the string “2021-12-07T10:18:00.000” :
this.selectedDate = new Date(myString).toISOString()

Edit: but I don’t get how it could affect the time selector since that one use the system time.

5

I am assuming then you are doing this:

const myDate = new Date('2021-12-07T10:18:00.000')
this.selectedDate = myDate.toISOString()

Because there is no timezone offset when creating the new Date object, it will create it with the local timezone so myDate.toString() would give a time of 10:18:00 GMT+0200. Then calling toISOString Javascript adjusts for the timezone (subtracting two hours for GMT+2) giving you 08:18:00.

If you do this you should get the results you want:

const myDate = new Date('2021-12-07T10:18:00.000+02:00')
1 Like
6

Sorry but it simply doesn’t change anything, I still get 08:18 in the time selector.

7

By the way, there is no problem when I use ion-datetime without value or v-model.
So I know this has something to do with the value I give, but what I tried didn’t work.

8

Can you share your component code? I tested yesterday in StackBlitz by setting v-model and it was working as expected.

1 Like
9

Thanks, I’ll share my component tomorrow morning

10

Here is my StackBlitz (fork of the Ionic Doc) :

where I give “2021-12-08T10:18:00.000” and the component displays 09:18.

By the way, I think your idea of adding “+02:00” at the end is interesting but then we have to handle the summer time (GMT+2) and winter time (GMT+1).

11

Thanks! So, I just had a thought. If you already have a date string in ISO8601 format, why are you converting it to a JS Date and then back? Doing the following appears to work fine.

this.selectedTime = this.initialTime = myString

If you do in fact have a Date object, I would use the date-fns package and formatISO. formatISO will add the timezone offset to the ISO date but won’t adjust the time giving you 2021-12-08T10:18:00.000+02:00. From my understanding, the Ionic datetime component ignores the timezone offset.

this.selectedTime = this.initialTime = formatISO(new Date(myString))

If you don’t want to use a package, then you’ll probably have to convert the Date object to a string manually.

// Under methods
toIsoDateTime(dateTimeString: Date): string {
  const year = dateTimeString.getFullYear();
  const month = (dateTimeString.getMonth() + 1).toString().padStart(2, '0');
  const dateOfMonth = dateTimeString.getDate().toString().padStart(2, '0');
  const hour = dateTimeString.getHours().toString().padStart(2, '0');
  const minute = dateTimeString.getMinutes().toString().padStart(2, '0');

  return `${year}-${month}-${dateOfMonth}T${hour}:${minute}:00.000`;
}

this.selectedTime = this.initialTime = this.toIsoDateTime(new Date(myString))
1 Like
12

Doing the following appears to work fine.

this.selectedTime = this.initialTime = myString

Using the string as is seems to solve the problem I created myself !
The string I have was already a valid ISO8601 format but I was focused on converting a Date object to a string.
Sometimes your worst enemy in yourself… :sweat_smile:

1 Like