Discussion about handling time zones in Sanity.io and potential solutions using momentjs and custom fields.

Hi, long time that I've not been there 👋I'm looking for a plugin that handles time zones and I'm a bit surprised to see that doesn't exist
🧐I've seen the

richDate

type but as already reported in an issue , the plugin is a bit incomplete. Does anyone know a plugin that I haven't found? Or does someone have an easy way to handle time zones?My need is to set a date + hour + timezone. From what I see so far, I'll have to built it myself.

I’m using a simple field with a list of options and deal with time zone on the frontend.

I did that on several sites and it’s working well. I’m not sure to understand why you'd want to handle time zones directly in Sanity?

What do you mean by "a list of options"? Are you listing time zones?My use case is that the editor has datetime to set with the time zone to handle. For example he might want to set a time at 4pm for the UTC+2 time zone and another one at 6pm on UTC-6.

I use something like this:

And I handle the rest on the frontend

It’s working fine for simple use cases

As the datetime field is computed using the browser's locale time zone, isn't this causing problem?

For my usage it was fine, but I only needed to display hours on a footer, so not that important 😅

I’ve been pondering this for a bit. I still want an ISO UTC date to appear in a query, but I want to be sure that users are consistently presented with a clear timezone/offset. The datetime type default input only provides UTC or relative offset options. You might be able to extend momentjs with timezones I can figure out nice javascript methods or make my own, but it’s turning this into an intuitive ui that has me a little stumped. I’ve been browsing bigger UI libraries like MUI and Mantine for something but haven’t quite found what I’m looking for. I could create a set of inputs to handle this and then insert an ISO date - but this doesn’t feel like a very elegant solution.
I’d love to hear how others have solved this.

Reminder that momentjs core and styled components are built in, so if you find any UI tools that rely on these, they can be added to your studio build in a custom component with very little additional effort.

After some research, I found that momentjs would be the best solution + it's already in Studio.My idea for now is to use a custom datetimeTimeZone field with a datetime picker + a time zone picker (list pulled from moment-timezone). At the saving time, the field would compute a prop that stores the datetime in UTC+0 format + timezone picked.