We are using payloadcms datepicker field. The problem we are encountering is that our user are based in asia/manila timezone for the admin portal. But the visitors of our website is based on America/Los_Angeles. There will be also instances where our user might be using the admin app from other timezone. What we want is to set the default timezone for PayloadCMS (our admin portal) to 1 specific for example America/Los_Angeles, since our website is going to be serve for America/Los_Angeles anyways.
Current:
User pick a start date and end date for an event (their timezone).
The website gets the start date and end date but was parsing it wrong since the provided date is from another timezone (since we receive utc, its getting a different offset)
you can ask cms users to open chrome dev tools and change their browsers location to San Francisco (same timezone) before entering the date/time
on an old project the way I dealt with this issue, and in terms of UX this is by far the easiest way to handle it
have a separate select field for timezones
then have your date and time fields be in respect to that
you can now combine these fields to have a universal time displayed
so if someone in india selects London timezone then 6pm, you can be sure that for america it will show 6pm london timezone
you might need to make it so these fields only store the time and only the date separately
eg not using date field, so maybe a custom component using the react datepicker lib, and then you have a date field that is read only and set to update in hooks
theres a couple of ways to do it, but separating out the timezone from the date is the easiest way in my experience
international timezones are a mess
maybe worth considering showing the timezone in payload, could clear up some of these confusions
Star
Discord
online
Get dedicated engineering support directly from the Payload team.