feat: add displayTimezone option to datetime input #8181
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
2 Skipped Deployments
|
|
No changes to documentation |
|
Component Testing Report Updated Feb 19, 2025 7:09 PM (UTC) ❌ Failed Tests (5) -- expand for details
|
⚡️ Editor Performance ReportUpdated Tue, 14 Jan 2025 16:40:44 GMT
Detailed information🏠 Reference resultThe performance result of
🧪 Experiment resultThe performance result of this branch
📚 Glossary
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Remaining work
date-fnsbut maintain backwards compatibility.Intl.DateTimeFormatinstead of the large dependency.displayTimeZoneoption ondatetime.timeZoneScopeas a concept to the codebase so that many different time zone scopes can be held.allowTimeZoneSwitchto let devs decide whether the timezone is fixed or user decided.useTimeZoneout of thescheduledPublishingfolder.Calendar.tsxto ensure month and year are respecting the time zone.Description
Adding the ability to add a `displayTimezone` option to the `datetime` input. This allows you to specify the timezone in which the stored UTC string from content lake will be displayed. When enabled, a tooltip is shown at the bottom left of the input field which indicates the timezone the field is representing. When you start editing this disappears.
A common use case here could be anything local that you would be working on in another timezone, for example concert times, apartment viewing times etc. etc. which are hard to work with today as the studio (just like the Date API) respects only the browsers relative display of the UTC string.
We have lots of signal on this one in this thread, as well as directly from users.
In addition to this, I decided to give it a go of removing moment from the
@sanity/utilpackage as a testbed how we should go about removing it across the entire codebase.I am using the new date-fns/tz and date-fns/utc packages from date-fns. The reason for these is that they are very lightweight,
TZDateMiniwhich I am using here is only 916 B, which is a whopper difference from the locale bloat frommoment-timezonedep we would need to make this work withmoment.As we have the ability to add custom date formats via the options on the
datetimeinput and this is documented as support moment.js formats, I decided to write a formatter that would use the Intl.DateTimeFormat.format functionality instead by mapping the moment formatting to that format object.What to review
* The naming of `displayTimezone` is worth a discussion. * The UI that I have chosen, with the text below should also be taken into consideration as to whether that is the best approach. * Browser support, not baking locales and timezones into the package and instead relying on the `Intl.DateTimeFormat` browser API means that browser versions [outside the widely supported](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#browser_compatibility) will not work.Testing
Notes for release