Custom timezone-aware datetime input component for Sanity CMS

datetime.tsx

import styles from "part:@sanity/base/theme/forms/text-input-style"
import FormField from "part:@sanity/components/formfields/default"
import { withDocument } from "part:@sanity/form-builder"
import PatchEvent, { set, unset } from "part:@sanity/form-builder/patch-event"

import * as React from "react"
import Datetime from "react-datetime"

class DatetimeInputRaw extends React.Component {
  render() {
    // `document` is the event we are editing
    const { document, markers, readOnly, type, value } = this.props

    // Reference the location entered for the event (if one has been selected)
    // to get it's time zone.
    const timezone = document.location?.tz ?? FALLBACK_TZ

    const selectedDatetime = value && new Date(value)

    return (
      <FormField
        label={type.title}
        description={type.description}
        markers={markers}
      >
        <Datetime
          value={selectedDatetime}
          displayTimeZone={timezone}
          onChange={(datetime) => this.onSelectDate(datetime)}
          inputProps={{ className: styles.textInput, disabled: readOnly }}
        />
      </FormField>
    )
  }

  private onSelectDate(date: Date | null) {
    const patch = PatchEvent.from(date ? set(date.toISOString()) : unset())
    this.props.onChange(patch)
  }
}

// Wrap `DatetimeInputRaw` with the `withDocument` higher-order component to
// inject the `document` prop.
export const DatetimeInput: React.ComponentType<DatetimeInputProps> = withDocument(
  DatetimeInputRaw
)