Handling timezones in Sanity.io richDate fields

I understand your timezone challenge with users entering data from different locations! There are a couple of good solutions for handling timezone-specific datetime entry in Sanity Studio.

Understanding How Sanity Stores Datetimes

First, it's important to know that Sanity's standard datetime field type stores all values as ISO-8601 formatted strings in UTC. This is standard practice for databases and ensures data consistency, but you need a way to handle timezone-specific entry and display.

Solution 1: Standard Datetime Field with displayTimeZone

The standard datetime field now includes a displayTimeZone option that lets you lock the field to a specific timezone for all users. This is perfect if you want everyone to enter times in Pacific Time:

import { defineField } from 'sanity'

defineField({
  name: 'eventDate',
  type: 'datetime',
  options: {
    dateFormat: 'YYYY-MM-DD',
    timeFormat: 'HH:mm',
    timeStep: 15,
    displayTimeZone: 'America/Los_Angeles', // Forces Pacific Time (handles PST/PDT automatically)
  },
})

The key here is that displayTimeZone accepts a timezone identifier like 'America/Los_Angeles'. This automatically handles the PST/PDT transitions throughout the year—you don't need to specify both separately.

Important note: The data is still stored as UTC in your dataset (which is good!), but the Studio interface will display and accept times in Pacific Time.

You can also use allowTimeZoneSwitch: false if you want to prevent users from changing the timezone:

options: {
  displayTimeZone: 'America/Los_Angeles',
  allowTimeZoneSwitch: false, // Prevents users from switching timezones
}

Solution 2: The richDate Plugin

If you need users to be able to choose their own timezone and have that timezone information stored with the datetime, the @sanity/rich-date-input plugin is the solution. Unlike the standard datetime field, richDate stores the timezone information along with the date/time in the document itself.

Install it:

npm i @sanity/rich-date-input

Then in your schema:

import { defineField } from 'sanity'

defineField({
  name: 'eventDate',
  type: 'richDate',
  options: {
    timeStep: 15, // optional: set time picker intervals
  },
})

With richDate, users get a timezone dropdown where they can select their timezone (like "America/Los_Angeles"), and that selection is preserved in the document. This means:

• A user in Los Angeles can enter "2:00 PM PST"
• A user in New York can enter "5:00 PM EST"
• The timezone context is stored and can be used when displaying the content

Which Should You Choose?

• Use displayTimeZone option if you want all users to enter times in a single, consistent timezone (like Pacific Time) regardless of where they're located
• Use the richDate plugin if you need to preserve which timezone each user was working in when they entered the time

Both solutions handle PST/PDT transitions automatically since they use standard timezone identifiers like "America/Los_Angeles" rather than explicit PST/PDT designations.

Displaying Times in Your Application

When querying and displaying these times in your frontend, remember to convert UTC values back to the appropriate timezone using libraries like date-fns-tz or luxon. The GROQ dateTime() function works with UTC timestamps, so you'll need to handle timezone conversion in your application code.