Skip to content

bug: Issue with the ion-datetime display #26943

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
3 tasks done
maelp opened this issue Mar 10, 2023 · 5 comments · Fixed by ionic-team/ionic-docs#2822
Closed
3 tasks done

bug: Issue with the ion-datetime display #26943

maelp opened this issue Mar 10, 2023 · 5 comments · Fixed by ionic-team/ionic-docs#2822
Labels

Comments

@maelp
Copy link

maelp commented Mar 10, 2023

Prerequisites

Ionic Framework Version

v6.x

Current Behavior

The documentation mentions that ion-datetime accepts a date in ISO format, but when using new Date().toISOString() in a location with a non-null UTC-offset, it seems that the date displayed by the ion-datetime is actually the UTC time and not the local time

Expected Behavior

I would expect that given a value=iso_datetime, the value actually displayed in the widget is the time in the local timezone (with UTC offset applied)

Steps to Reproduce

            <ion-datetime-button datetime="curTimestamp" />
            <ion-modal :keep-contents-mounted="true">
              <ion-datetime
                id="curTimestamp"
                :value="new Date(curTimestamp * 1000).toISOString()"
                :show-default-buttons="true"
                @ion-change="(event) => setCurTimestamp(event)"
              ></ion-datetime>
            </ion-modal>

this results in the datetime component showing "16:52" although it's "17:52" at my local timezone (GMT+1)

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.4

Utility:

cordova-res (update available: 0.15.4) : 0.15.3
native-run (update available: 1.7.1) : 1.5.0

System:

NodeJS : v16.18.0
npm : 9.1.2
OS : macOS

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Mar 10, 2023
@maelp
Copy link
Author

maelp commented Mar 10, 2023

A dirty workaround I did was to apply the timezone offset, so that ionic-datetime would have the proper string

            <ion-datetime-button datetime="curTimestamp" />
            <ion-modal :keep-contents-mounted="true">
              <ion-datetime
                id="curTimestamp"
                :value="toIonicDatetimeISOString(curTimestamp)"
                :show-default-buttons="true"
                @ion-change="(event) => setCurTimestamp(event)"
              ></ion-datetime>
            </ion-modal>

where

export function toIonicDatetimeString(timestamp) {
  // to correct a bug from ionic-datetime which does not convert the date back to ISO,
  // we shift the date itself
  const baseString = new Date(
    timestamp * 1000 - new Date().getTimezoneOffset() * 60 * 1000
  ).toISOString();
  const res = baseString.replace(/:[0-9]{2}\.[0-9]*Z/, "");
  return res;
}

@liamdebeasi liamdebeasi self-assigned this Mar 10, 2023
@liamdebeasi
Copy link
Contributor

Thanks for the report. As noted in https://ionicframework.com/docs/api/datetime#time-zones, ion-datetime does not adjust values according to different time zones. In other words, it interprets values exactly as they are provided. Developers need to account for timezones themselves when passing values to datetime.

Here is another example: https://codepen.io/liamdebeasi/pen/JjaMWYw?editors=1010

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Mar 10, 2023
@liamdebeasi liamdebeasi removed their assignment Mar 10, 2023
@ionitron-bot ionitron-bot bot removed the triage label Mar 10, 2023
@maelp
Copy link
Author

maelp commented Mar 11, 2023

Okay, but then the documentation should perhaps not mention that the date that ion-datetime accept must be given in UTC (with the "Z" at the end) since this is confusing (the fact that we give a datetime in UTC makes user think that the widget will handle local timezone itself), but rather to just say, "give a date in the format YYYY/MM/DD hh:mm:ss and the widget will display this"

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Mar 11, 2023
@liamdebeasi
Copy link
Contributor

The documentation states that values should be provided in an "ISO 8601 format": https://ionicframework.com/docs/api/datetime#iso-8601-datetime-format-yyyy-mm-ddthhmmz. We do not say that the timezone must be provided, but that section could definitely be more clear that any timezone information is ignored. I'll update the docs.

@ionitron-bot
Copy link

ionitron-bot bot commented Apr 12, 2023

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 12, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants