Time and date picker adjusts time based on timezone

[galingong]

Description

time_picker field would adjust the value displayed in the field based on OS/browser timezone ie. will not display the value stored in the DB, but treats that value as if it was UTC and the displayed value was local. Value in store is correct so it should be something related to frontend/flatpickr.js.

Edit: date_picker with time is also affected.

Steps to reproduce

Set your OS timezone to something other than UTC and compare DB stored value and the field.

Expected result

No timezone adjustment

Actual result

Value in field offset by timezone

Versions

Twill version: 2.3.0
Laravel version: 10

[galingong]

It's probably because in DatePicker.vue on line 152 date-fns.parse is called with date + 'Z' and format + 'X' so the parsed value would be offset. Removing the Z (and since it's not needed anymore, also the X from format) seems to resolve the issue.

Edit: Had to also edit flatpickr format on line 135 to dateFormat: self.enableTime ? 'Y-m-d H:i' : 'Y-m-d' to completely resolve the problem.

[ifox]

The offset is intended to improve the user experience. Dates should always be stored in UTC in the database, but you don't want your users to have to do mental gymnastics with timezones when using date and time pickers in the CMS.

Are you reporting a bug with this implementation, or is it more that you were looking to disable that behavior?

[galingong]

To be honest, at the point when I opened this issue I was completely oblivious to the fact that it was good practice to store UTC dates in the DB - answering your question - it's not a bug if you followed best practices, so we might as well close this. But still it would be nice to be able to store and display datetime values independently from timezones. Do you have an idea if it would be possible currently?

[ifox]

I don't think it's possible currently without overriding a bunch of things. It should be possible to make this an optional feature, but we prefer pushing for best practices by default.