DataViews: Fix datetime filter showing UTC instead of local time#75561
DataViews: Fix datetime filter showing UTC instead of local time#75561Mustafabharmal wants to merge 2 commits intoWordPress:trunkfrom
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
|
||
| return dateI18n( formatDatetime.datetime, getDate( value ) ); | ||
| const dateValue = parseDateTime( value ); | ||
| return dateValue !== null ? dateValue.toLocaleString() : ''; |
There was a problem hiding this comment.
format should be preserved and not removed.
Should we just pass the timezone in dateI18n? Not sure what's the expected to show: the timezone based on the WP installation or the browser one?
There was a problem hiding this comment.
@Mustafabharmal this is what format is used for:
Screen.Recording.2026-02-18.at.18.00.38.mov
There was a problem hiding this comment.
This is an important bugfix to address in time for WordPress 7.0 (schedule (we've entered the "beta period" today). Mustafa, let us know if you'll have the availability to work on this.
There was a problem hiding this comment.
Still not sure about the proper way to solve this. If I'm not wrong everything around WP works around a set timezone from the settings and here in DataForm controls it seems we have the only case where we use type="datetime-local".
We already use DateCalendar in which we pass the timezone from the settings and not the local timezone from the browser. Should we consider using TimePicker component and remove type="datetime-local", like publish dates do etc..?
@aduth I think you recently worked for some date/timezone issues and you might have some feedback. I'll also ping @tyxla for thoughts.
There was a problem hiding this comment.
Thanks for the ping @ntsekouras 🙌
I'm actually not sure we should be using datetime-local at all.
AFAIK, datetime-local is timezone-agnostic; it doesn't really care about the timezone. Why can this be an issue? Because in WordPress, there are potentially three different time zones in play:
- The WordPress site timezone - configured in Settings > General (e.g.,
America/New_York, or a UTC offset likeUTC-5). - UTC - WordPress stores dates in both local and GMT (
post_datevspost_date_gmt). - The user's browser timezone - the OS/browser timezone of the person editing, which may differ from the site timezone.
The concrete issue can be that when you put a datetime string like 2026-02-22T14:00 into a datetime-local input, there's no way to communicate which timezone that value represents. If the REST API returns a date in UTC, but the site is configured for Europe/Berlin (UTC+1), and the user's browser is in America/Los_Angeles (UTC-8), the displayed time is ambiguous, the user has no indication of what timezone the value refers to, and the browser doesn't adjust it. And it gets even worse if the site's timezone gets changed. Not to mention that DST transitions can't be accounted for correctly, because those also depend on specific time zones.
In some instances, this won't matter (when the user and site timezone are the same, or when the field actually has no relation to the site's timezone), but I can imagine plenty of cases where this will actually cause subtle bugs and user confusion.
Ideally, we don't have to mess with timezones, or we just don't care about timezones (hopefully this is the case here). However, if we do care about the timezone, we might have to use a component that actually understands timezones. It is a bit unfortunate that we don't really have an alternative to datetime-local in the components library that just gives you a single field out of the box.
On the contrary, it's worth mentioning that after @mirka's recent changes in #74815 we actually advise folks to use the time & date components with caution, encouraging usage of the native date or datetime-local inputs.
I know @aduth's mind has been in this area a lot these days, so I'm curious what he can add to this discussion.
There was a problem hiding this comment.
I'm actually not sure we should be using
datetime-localat all.there's no way to communicate which timezone
If it's ambiguous in context, I think the label or description could be used to communicate the time zone the control is showing. Or even the prefix slot or something. But in any case, I don't think it's technically necessary for the datetime-local itself to understand time zones — the conversion can happen outside as long as we choose intentionally which time zone to use, and keep things consistent end to end.
What's actually a problem sometimes is the time format aspect of it, where <input> types can show either 12-hour or 24-hour format, depending on the browser implementation, and there's no way to change or detect that reliably. @mtias and I discussed this recently, and agreed that we may eventually need a custom time picker component and a new WP user preference for 12/24-hour formatting. But that's not really a time zone problem, like we have here.
There was a problem hiding this comment.
Yeah, I think the thing that's confusing for me (and users?) here is that it's unclear what time this is actually following: is it the site time, my local time, or something else (e.g. UTC)? The DateTimePicker component follows the timezone as configured in @wordpress/date (the site time) and explicitly displays this as a label (see screenshot). As @mirka mentioned, this happens outside the time control itself to provide the context that's missing in the input field itself.
In this case, judging by the bug described in #75511 (out-of-sync with the shown chip value) and how this was previously fixed in #72756, I guess it's supposed to represent local time, and that's how the data itself is filtered (unconfirmed). In that framing, it makes sense to me to address the regression specifically by converting the value to local time. Though I would strongly encourage some regression test coverage that asserts this expected behavior.
Separately from the regression, I'm sure there's some improvements we could make to address the ambiguity of timezone, like showing timezone labels with the time field, making timezone configuration on DataViews or following @wordpress/date setting (if reasonable), internal refactoring to consider timezoneless times via Temporal (with polyfill), etc.
There was a problem hiding this comment.
So how do we move forward with this? One of the main reasons I suggested TimePicker above, was about showing the UTC to help users reason with what they see. As others suggested we could have this info in the label of the field and align the input value with the filter value to show local times, which I agree with (not use TimePicker).
I'm wondering if by using local time for the input and filter chip (without a timezone label) we could end up with results that could be hard to reason with, when using fields that do not show local time. If I'm not wrong, that's the case for date field.
There was a problem hiding this comment.
I agree that the current datetime field is confusing in that the user does not know the timezone. I've created #76194 to track this to completion (but it's not something we need to land in beta).
|
I've seen this hasn't had much progress and wanted to fix it for the next beta, so prepared #76193 @Mustafabharmal thanks for your contribution, I'll make sure you got the props in the commit. |
|
Closing this one as #76193 has been merged and backported to beta. |
What?
Closes: #75511
Fixes the datetime filter to display values in the user's local timezone instead of UTC.
Why?
When using a filter on a
datetimefield, the selected date/time was being displayed in UTC instead of the user's local timezone.How?
Updated the
getValueFormattedfunction inpackages/dataviews/src/field-types/datetime.tsxto useparseDateTime()and.toLocaleString()instead ofdateI18n(), ensuring proper timezone conversion for display.Testing Instructions
npm run storybook:devScreenshots or screencast
Before this fix: The filter would show the time in UTC
Before-datetime-filter.mov
After this fix: The filter shows the time in your local timezone
After-datetime-filter.mov