Giters

formio / formio.js

JavaScript powered Forms with JSON Form Builder

Home Page:https://formio.github.io/formio.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The DateTime component fails to show the accurate time when within the Renderer and provided with data.

Justinlcx opened this issue · comments

commented

When inputting data into the DateTime component with Of Viewer, the displayed time does not accurately reflect the time zone that was specified.

Version/Branch
4.19.1

Expected behavior

When using the DateTime component ( with Of Viewer ), my expectation is that it will display the time in the current user’s time zone, rather than the one initially provided to it.

Screenshots

  1. Add a DateTime in the form ( select Of Viewer ).
  2. Select a date and time.

image

  1. Change the UTC value in the json data.

image

  1. The time is displayed in the new time zone, but it should be displayed in the local user time zone.
  2. The time should be ( 12 pm + 2 ) -> 2 am.

Additional context
This issue is currently reproducible in the sandbox.

This could be link to : issues/3225

commented

@Justinlcx I was not able to replicate your issue. However, I didn’t quite understand the scenario described above. Display in Timezone = of Viewer setting works as expected, as well as Display in Timezone = UTC. You can see it in the attached video. Could you clarify step #3 "Change the UTC value in the json data". Is it switching the Display in Timezone setting from 'of Viewer' to 'UTC'?

2024-05-10.13-51-50.mp4
commented

@olgabann I'm sorry for the delay, i will try to be more precise. My explanation will be based on the video i will attack.

I created a form with a DateTime component, and the value is displayed in the viewer’s timezone. If I select a date in the component, it correctly shows it to me in my local timezone (everything works fine up to this point). The problem arises afterward. If I decide to change the value in the JSON data, I can change the hour from 21:00 to 22:00, and the DateTime component will be updated. However, if I change the timezone in the JSON data of the datetime from -04:00 to -05:00, I expect that the component will convert the data (2024-04-26T22:00:-05:00) to my local timezone, so I should see in the DateTime component: 2024-04-26 09:00 PM. But it still shows 2024-04-26 10:00 PM.

Here’s an example to illustrate the issue:

Original data: 2024-04-26T22:00:-04:00
Expected display in DateTime component: 2024-04-26 10:00 PM
Change TimeZone in JSON data: 2024-04-26T22:00:-05:00
Expected display in DateTime component: 2024-04-26 09:00 PM
Actual display in DateTime component: 2024-04-26 10:00 PM

As you can see, despite changing the timezone in the JSON data, the DateTime component still shows the old time. It seems like the DateTime component is not correctly handling timezone changes in the JSON data, i would expect that the dateTime in the JSON Data would be converted to my local date time to be displayed.

Demo-DateTime-TimeZone-Bug.mp4

If you need more precision don't hesitate !

commented

@Justinlcx It doesn't look like a real-life scenario. The submission JSON part of the sandbox showcases how submission looks in JSON format. Some changes work in the opposite direction, but not all of them

commented

The Submission part of the sandbox was use to demonstrate visually the problem, but in my case, the problem occur when i try to build the rendered form with data inside. The DateTime take the value from the data, but it does not convert it to the TimeZone of the viewer.

commented

Scenario 1:

  1. I submit the form with the date/time 2020-11-16T04:05:00-05:00;
  2. In submission I see the time in UTC format: 2020-11-16T09:05:00.000Z (04:05 + 5 hours);
  3. I check the submission in the viewer time zone (UTC+3): 2020-11-16 12:05 PM (09:05 + 3 hours).
2024-07-11.14-13-29.mp4

Scenario 2:

  1. I edit the previous submission changing the time zone from UTC-5 to UTC-6: 2020-11-16T04:05:00-06:00;
  2. In submission I see the time in UTC format: 2020-11-16T10:05:00.000Z (04:05 + 6 hours);
  3. I check the submission in the viewer time zone (UTC+3): 2020-11-16 01:05 PM (10:05 + 3 hours).
2024-07-11.14-15-13.mp4

In Data Base data is stored in UTC format, I'm not able to change something there:
image

commented

@Justinlcx please review the scenarios above. If this is not your case, then please write the steps to reproduce without using sandbox