Ionic-framework: bug: ion datetime forces to local time without options for backwards compatibility

[MKhowaja]

Bug Report

[x] 4.9.1

Current behavior:
With the more recent releases of ionic, ion datetime now always converts the date to the system's timezone. This is not backwards compatible with previous behaviour and there is no option for configurability.

Expected behavior:
Ion datetime needs to be enhanced so that backwards compatibility is supported.

Steps to reproduce:
N/A Just want backwards compatibility (ie there should be an option to allow datetime to behave as it did before all the changes with respecting timezones).

Related code:

            /**
             * Prevent convertDataToISO from doing any
             * kind of transformation based on timezone
             * This cancels out any change it attempts to make
             *
             * Important: Take the timezone offset based on
             * the date that is currently selected, otherwise
             * there can be 1 hr difference when dealing w/ DST
             */
            const date = new Date(convertDataToISO(this.datetimeValue));
            this.datetimeValue.tzOffset = date.getTimezoneOffset() * -1;

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (/Users/mustaqeemk/.nvm/versions/node/v11.6.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.803.2
   @angular-devkit/schematics    : 8.3.2
   @angular/cli                  : 8.3.2
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 5.0.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 30 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/mustaqeemk/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v11.6.0 (/Users/mustaqeemk/.nvm/versions/node/v11.6.0/bin/node)
   npm               : 6.10.2
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[daem0ndev]

We could have an optional prop for timezone that if not supplied will default to the users local timezone but if supplied the ion date time will display the value in the provided timezone. For users expecting the behavior pre 4.2 they would simply supply a timezone prop of 'UTC' and the ion date time will not convert the value to the device timezone

[liamdebeasi]

Thanks for the feature request. @daem0ndev's approach sounds good. I imagine it would look something like this:

@Prop() displayTimezone?: string;

If timezone is undefined, the date options will be displayed relative to the user's timezone (current behavior).

Example of forcing all values to be displayed in UTC:

<ion-datetime value="2019-10-01T15:43:40.394Z" display-timezone="utc"></ion-datetime>

edit: spoke with @daem0ndev offline, and we decided displayTimezone would be better to keep it consistent with the other props. Updated my example.

[daem0ndev]

PR coming in soon! thanks ionic team!!!

[daem0ndev]

after discussing with @liamdebeasi we are going to go with a prop name of displayTimezone instead of just timezone to make it clear that this is only the timezone to be respected for display. The input and output values will always be in UTC (current behavior)

[daem0ndev]

PR is up!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/19519 and will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.