bug: ion-datetime doesn't check for local timezone when you pass an UTC date

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

The new ion-datetime component added in Ionic 6 doesn’t check the locale timezone of the user when you pass it a date in UTC format. The old component of Ionic 5 did it correctly.

For example, if you are in a UTC+01:00 timezone, and you pass to the component the value 2021-12-06T23:00:00.000Z, in Ionic 5 the component select the day 7

But with the new component of Ionic 6, it selects the day 6

Expected Behavior

It should have the same behavior as in Ionic 5, or add a new input to indicate that you want to convert the UTC date to locale date

Steps to Reproduce

In this case I’m using Angular Reactive Forms.

Add an ion-datetime component to your html

<ion-datetime [formControl]="dateForm" presentation="date"></ion-datetime>

Create a new Date, and pass to the ion-datetime in UTC format

// In my case, I'm in an UTC+01:00 timezone
const date = new Date(2021, 11, 7, 0, 0, 0, 0).toISOString(); // 2021-12-06T23:00:00.000Z
this.dateForm = new FormControl(date);

Now the ion-datetime component doesn’t select the locale date, but the UTC date

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.17.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.0 (/Users/imac/workspace/vega/vega/node_modules/@ionic/angular)
   @angular-devkit/build-angular : 13.0.4 (/Users/imac/workspace/vega/vega/node_modules/@angular-devkit/build-angular)
   @angular-devkit/schematics    : 13.1.1 (/Users/imac/workspace/vega/vega/node_modules/@angular-devkit/schematics)
   @angular/cli                  : 13.0.4 (/Users/imac/workspace/vega/vega/node_modules/@angular/cli)
   @ionic/angular-toolkit        : 4.0.0 (/Users/imac/workspace/vega/vega/node_modules/@ionic/angular-toolkit)

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.5.0) : 0.2.8

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.15.5 (/usr/local/bin/node)
   npm        : 6.14.11
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

Additional Information

It happens with the time in the same way, if you don’t set “presentation” to “date”, you can see that the hour selected is 23:00

[amandaejohnston]

I’m going to close this issue since the current behavior is intentional, and it sounds like things are resolved. Do let us know if you still have questions.

[liamdebeasi]

Thanks for the issue. This is an intentional behavior of the new Ionic 6 Datetime. Previously in Ionic 5, there were many issues with timezones being converted automatically/incorrectly that impacted the user experience and provided for unexpected behaviors.

I did a quick check, and the native datetime implementation in browsers has the same behavior: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#setting_timezones

Have you tried localizing the UTC string with a library such as date-fns first?