Ionic 6 - ion-datetime, show time in local clients timezone

macondele · December 17, 2021, 3:44pm

Hello!

At the time of writing this the current time in ISO is 2021-12-17T15:38:56.197Z.
If I enter that as a value into the ion-datetime component it does not take in consideration what time zone the user is in.

For example users in Paris (France) will see the time listed in the component as 15:38 although it is equivalent to 16:38 in their time zone.

Did I miss anything or are we supposed to manually manipulate the time outside of Ionic before sending it in to the ion-datetime component?

Converting 2021-12-17T15:38:56.197Z to 2021-12-17T16:38:56.197+01:00 does work but maybe this should be built into ion-datetime as an option?

mhartington · December 17, 2021, 4:47pm

Hey there! Little known fact…the logic for auto-handling timezones was removed in favor of letting developer manage that themselves. Since every dev will have a unique situation, having timezone logic in place didn’t always work out well for folks.

We recently merged some docs in to clarify this, but they just haven’t been deployed yet. Here’s the docs source though for reference

github.com

ionic-team/ionic-framework/blob/511b8690ae1aab9b7ef1304a05248811d748db40/core/src/components/datetime/readme.md#time-zones

# ion-datetime

Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the a preferred format, and manage the datetime values.

### Datetime Data

Historically, handling datetime values within JavaScript, or even within HTML
inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
notoriously difficult to correctly parse apart datetime strings or to format
datetime values. Even worse is how different browsers and JavaScript versions
parse various datetime strings differently, especially per locale.

Fortunately, Ionic Framework's datetime input has been designed so developers can avoid
the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience.

##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ

Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)
for its value. The value is simply a string, rather than using JavaScript's
`Date` object. Using the ISO datetime format makes it easy to serialize

This file has been truncated. show original

macondele · December 17, 2021, 5:14pm

Thanks for the quick answer!

Topic		Replies	Views
Ion-datetime Does not use local Timezone ionic-v3	0	1137	July 15, 2019
How to make ion-datetime time the same as what is displayed on the UI Ionic Framework	4	379	February 28, 2024
Ion-datetime hours value not showing correct Timezone Ionic Vue	11	2069	July 22, 2022
Help with ion-datetime Ionic Framework	1	161	March 27, 2024
Datetime component - show local time not UTC time? ionic-v3	9	17218	January 7, 2020

Ionic 6 - ion-datetime, show time in local clients timezone

Related topics