From 93d76ce8a263d6edcdce6713ee4351b1a55663cd Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Thu, 30 Jan 2025 14:07:46 +0000
Subject: [PATCH] fix: resolving dateTime picker bugs with content releases
 (#8455)

---
 .../inputs/DateInputs/DatePicker.tsx          |   1 +
 .../inputs/DateInputs/DateTimeInput.tsx       |  32 +++++-
 .../inputs/DateInputs/calendar/Calendar.tsx   |   5 +
 .../DateInputs/calendar/CalendarDay.tsx       |   5 +-
 .../DateInputs/calendar/CalendarMonth.tsx     |   2 +
 .../sanity/src/core/i18n/bundles/studio.ts    |  10 +-
 .../components/ScheduleDatePicker.tsx         |  72 +++++++++++++
 .../components/dialog/CreateReleaseDialog.tsx |  49 +++++++--
 .../components/dialog/ReleaseForm.tsx         |  80 +++++++-------
 .../__tests__/CreateReleaseDialog.test.tsx    |   7 ++
 .../dialog/CopyToNewReleaseDialog.tsx         |  46 ++++++--
 .../src/core/releases/i18n/resources.ts       |   3 +
 .../ReleaseScheduleButton.tsx                 |  54 ++++++++--
 .../tool/detail/ReleaseTypePicker.tsx         | 100 +++++++++++-------
 .../__tests__/ReleaseTypePicker.test.tsx      |  12 ++-
 .../releases/util/getIsScheduledDateInPast.ts |  11 ++
 16 files changed, 374 insertions(+), 115 deletions(-)
 create mode 100644 packages/sanity/src/core/releases/components/ScheduleDatePicker.tsx
 create mode 100644 packages/sanity/src/core/releases/util/getIsScheduledDateInPast.ts

diff --git a/packages/sanity/src/core/components/inputs/DateInputs/DatePicker.tsx b/packages/sanity/src/core/components/inputs/DateInputs/DatePicker.tsx
index 2d65a13bc12..cbdef111aa7 100644
--- a/packages/sanity/src/core/components/inputs/DateInputs/DatePicker.tsx
+++ b/packages/sanity/src/core/components/inputs/DateInputs/DatePicker.tsx
@@ -13,6 +13,7 @@ export const DatePicker = forwardRef(function DatePicker(
     monthPickerVariant?: CalendarProps['monthPickerVariant']
     padding?: number
     showTimezone?: boolean
+    isPastDisabled?: boolean
   },
   ref: ForwardedRef<HTMLDivElement>,
 ) {
diff --git a/packages/sanity/src/core/components/inputs/DateInputs/DateTimeInput.tsx b/packages/sanity/src/core/components/inputs/DateInputs/DateTimeInput.tsx
index a89e6c66702..7d3a40f2ecc 100644
--- a/packages/sanity/src/core/components/inputs/DateInputs/DateTimeInput.tsx
+++ b/packages/sanity/src/core/components/inputs/DateInputs/DateTimeInput.tsx
@@ -1,12 +1,15 @@
 import {CalendarIcon} from '@sanity/icons'
-import {Box, Flex, LayerProvider, useClickOutsideEvent} from '@sanity/ui'
+import {Box, Card, Flex, LayerProvider, Text, useClickOutsideEvent} from '@sanity/ui'
+import {isPast} from 'date-fns'
 import {
   type FocusEvent,
   type ForwardedRef,
   forwardRef,
   type KeyboardEvent,
   useCallback,
+  useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -14,6 +17,7 @@ import FocusLock from 'react-focus-lock'
 
 import {Button} from '../../../../ui-components/button/Button'
 import {Popover} from '../../../../ui-components/popover/Popover'
+import {useTranslation} from '../../../i18n'
 import {type CalendarProps} from './calendar/Calendar'
 import {type CalendarLabels} from './calendar/types'
 import {DatePicker} from './DatePicker'
@@ -35,6 +39,7 @@ export interface DateTimeInputProps {
   monthPickerVariant?: CalendarProps['monthPickerVariant']
   padding?: number
   disableInput?: boolean
+  isPastDisabled?: boolean
 }
 
 export const DateTimeInput = forwardRef(function DateTimeInput(
@@ -53,17 +58,28 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
     constrainSize = true,
     monthPickerVariant,
     padding,
+    disableInput,
+    isPastDisabled,
     ...rest
   } = props
+  const {t} = useTranslation()
   const popoverRef = useRef<HTMLDivElement | null>(null)
   const ref = useRef<HTMLInputElement | null>(null)
   const buttonRef = useRef(null)
 
+  const [referenceElement, setReferenceElement] = useState<HTMLInputElement | null>(null)
+
   useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
     forwardedRef,
     () => ref.current,
   )
 
+  /**
+   * Setting referenceElement in effect makes sure it's up to date after the initial render
+   * cycle - avoiding referenceElement used byPopover from being out of sync with render state
+   */
+  useEffect(() => setReferenceElement(ref.current), [])
+
   const [isPickerOpen, setPickerOpen] = useState(false)
 
   useClickOutsideEvent(
@@ -84,6 +100,11 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
 
   const handleClick = useCallback(() => setPickerOpen(true), [])
 
+  const isDateInPastWarningShown = useMemo(
+    () => inputValue && isPastDisabled && isPast(new Date(inputValue)),
+    [inputValue, isPastDisabled],
+  )
+
   const suffix = readOnly ? null : (
     <Flex style={{padding: '5px'}}>
       <Button
@@ -104,7 +125,7 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
     <LazyTextInput
       ref={ref}
       {...rest}
-      readOnly={readOnly}
+      readOnly={disableInput || readOnly}
       value={inputValue}
       onChange={onInputChange}
       suffix={
@@ -116,10 +137,16 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
             <Popover
               constrainSize={constrainSize}
               data-testid="date-input-dialog"
+              referenceElement={referenceElement}
               portal
               content={
                 <Box overflow="auto">
                   <FocusLock onDeactivation={handleDeactivation}>
+                    {isDateInPastWarningShown && (
+                      <Card margin={1} padding={2} radius={2} shadow={1} tone="critical">
+                        <Text size={1}>{t('inputs.dateTime.past-date-warning')}</Text>
+                      </Card>
+                    )}
                     <DatePicker
                       monthPickerVariant={monthPickerVariant}
                       calendarLabels={calendarLabels}
@@ -127,6 +154,7 @@ export const DateTimeInput = forwardRef(function DateTimeInput(
                       timeStep={timeStep}
                       onKeyUp={handleKeyUp}
                       value={value}
+                      isPastDisabled={isPastDisabled}
                       onChange={onChange}
                       padding={padding}
                     />
diff --git a/packages/sanity/src/core/components/inputs/DateInputs/calendar/Calendar.tsx b/packages/sanity/src/core/components/inputs/DateInputs/calendar/Calendar.tsx
index 84366251e84..f84202a8057 100644
--- a/packages/sanity/src/core/components/inputs/DateInputs/calendar/Calendar.tsx
+++ b/packages/sanity/src/core/components/inputs/DateInputs/calendar/Calendar.tsx
@@ -42,6 +42,7 @@ export type CalendarProps = Omit<ComponentProps<'div'>, 'onSelect'> & {
   monthPickerVariant?: (typeof MONTH_PICKER_VARIANT)[keyof typeof MONTH_PICKER_VARIANT]
   padding?: number
   showTimezone?: boolean
+  isPastDisabled?: boolean
 }
 
 // This is used to maintain focus on a child element of the calendar-grid between re-renders
@@ -76,6 +77,7 @@ export const Calendar = forwardRef(function Calendar(
     timeStep = 1,
     onSelect,
     labels,
+    isPastDisabled,
     monthPickerVariant = 'select',
     padding = 2,
     showTimezone = false,
@@ -232,12 +234,14 @@ export const Calendar = forwardRef(function Calendar(
                   icon={ChevronLeftIcon}
                   mode="bleed"
                   onClick={() => moveFocusedDate(-1)}
+                  data-testid="calendar-prev-month"
                   tooltipProps={{content: 'Previous month'}}
                 />
                 <Button
                   icon={ChevronRightIcon}
                   mode="bleed"
                   onClick={() => moveFocusedDate(1)}
+                  data-testid="calendar-next-month"
                   tooltipProps={{content: 'Next month'}}
                 />
               </TooltipDelayGroupProvider>
@@ -312,6 +316,7 @@ export const Calendar = forwardRef(function Calendar(
             focused={focusedDate}
             onSelect={handleDateChange}
             selected={selectedDate}
+            isPastDisabled={isPastDisabled}
           />
           {PRESERVE_FOCUS_ELEMENT}
         </Box>
diff --git a/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarDay.tsx b/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarDay.tsx
index f7916da6af0..87428355f14 100644
--- a/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarDay.tsx
+++ b/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarDay.tsx
@@ -1,4 +1,5 @@
 import {Card, Text} from '@sanity/ui'
+import {isPast} from 'date-fns'
 import {useCallback} from 'react'
 
 interface CalendarDayProps {
@@ -8,10 +9,11 @@ interface CalendarDayProps {
   isCurrentMonth?: boolean
   isToday: boolean
   selected?: boolean
+  isPastDisabled?: boolean
 }
 
 export function CalendarDay(props: CalendarDayProps) {
-  const {date, focused, isCurrentMonth, isToday, onSelect, selected} = props
+  const {date, focused, isCurrentMonth, isToday, onSelect, selected, isPastDisabled} = props
 
   const handleClick = useCallback(() => {
     onSelect(date)
@@ -28,6 +30,7 @@ export function CalendarDay(props: CalendarDayProps) {
         data-focused={focused ? 'true' : ''}
         role="button"
         tabIndex={-1}
+        disabled={isPastDisabled && !isToday && isPast(date)}
         onClick={handleClick}
         padding={2}
         radius={2}
diff --git a/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarMonth.tsx b/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarMonth.tsx
index 3a609d14fe6..423c9e5493f 100644
--- a/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarMonth.tsx
+++ b/packages/sanity/src/core/components/inputs/DateInputs/calendar/CalendarMonth.tsx
@@ -11,6 +11,7 @@ interface CalendarMonthProps {
   selected?: Date
   onSelect: (date: Date) => void
   hidden?: boolean
+  isPastDisabled?: boolean
   weekDayNames: [
     mon: string,
     tue: string,
@@ -62,6 +63,7 @@ export function CalendarMonth(props: CalendarMonthProps) {
                 key={`${weekIdx}-${dayIdx}`}
                 onSelect={props.onSelect}
                 selected={selected}
+                isPastDisabled={props.isPastDisabled}
               />
             )
           }),
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 6d050f35b6c..c0d3f1135dd 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -559,6 +559,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.array.resolving-initial-value': 'Resolving initial value…',
   /** Tooltip content when boolean input is disabled */
   'inputs.boolean.disabled': 'Disabled',
+  /** Warning label when selected datetime is in the past */
+  'inputs.dateTime.past-date-warning': 'Select a date in the future.',
   /** Placeholder value for datetime input */
   'inputs.datetime.placeholder': 'e.g. {{example}}',
   /** Acessibility label for button to open file options menu */
@@ -1160,6 +1162,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   /* Relative time, just now */
   'relative-time.just-now': 'just now',
 
+  /** Action message to add document to new release */
+  'release.action.add-to-new-release': 'Add to release',
   /** Action message to add document to release */
   'release.action.add-to-release': 'Add to {{title}}',
   /** Action message for when document is already in release  */
@@ -1210,6 +1214,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'release.chip.tooltip.unknown-date': 'Unknown date',
   /** Label for tooltip on deleted release */
   'release.deleted-tooltip': 'This release has been deleted',
+  /** Title for copying version to a new release dialog */
+  'release.dialog.copy-to-release.title': 'Copy version to new release',
   /** Title for creating releases dialog */
   'release.dialog.create.title': 'Create release',
   /** Label for description in tooltip to explain release types */
@@ -1232,8 +1238,10 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'release.navbar.tooltip': 'Releases',
   /** The placeholder text when the release doesn't have a title */
   'release.placeholder-untitled-release': 'Untitled release',
-  /**The toast title that will be shown when the user has a release perspective which is now archived */
+  /** The toast title that will be shown when the user has a release perspective which is now archived */
   'release.toast.archived-release.title': "The '{{title}}' release was archived",
+  /** The toast tiele that will be shown the creating a release fails */
+  'release.toast.create-release-error.title': 'Failed to create release',
   /**The toast title that will be shown when the user has a release perspective which is now deleted */
   'release.toast.not-found-release.title': "The '{{title}}' release could not be found",
   /** Label for when a version of a document has already been added to the release */
diff --git a/packages/sanity/src/core/releases/components/ScheduleDatePicker.tsx b/packages/sanity/src/core/releases/components/ScheduleDatePicker.tsx
new file mode 100644
index 00000000000..29a3e4e658f
--- /dev/null
+++ b/packages/sanity/src/core/releases/components/ScheduleDatePicker.tsx
@@ -0,0 +1,72 @@
+import {EarthGlobeIcon} from '@sanity/icons'
+import {Flex} from '@sanity/ui'
+import {format, isValid, parse} from 'date-fns'
+import {useCallback, useMemo} from 'react'
+
+import {Button} from '../../../ui-components/button'
+import {MONTH_PICKER_VARIANT} from '../../components/inputs/DateInputs/calendar/Calendar'
+import {type CalendarLabels} from '../../components/inputs/DateInputs/calendar/types'
+import {DateTimeInput} from '../../components/inputs/DateInputs/DateTimeInput'
+import {getCalendarLabels} from '../../form/inputs/DateInputs'
+import {useTranslation} from '../../i18n/hooks/useTranslation'
+import useDialogTimeZone from '../../scheduledPublishing/hooks/useDialogTimeZone'
+import useTimeZone from '../../scheduledPublishing/hooks/useTimeZone'
+
+interface ScheduleDatePickerProps {
+  initialValue: Date
+  onChange: (date: Date) => void
+}
+
+const inputDateFormat = 'PP HH:mm'
+
+export const ScheduleDatePicker = ({
+  initialValue: inputValue,
+  onChange,
+}: ScheduleDatePickerProps) => {
+  const {t} = useTranslation()
+  const {timeZone} = useTimeZone()
+  const {dialogTimeZoneShow} = useDialogTimeZone()
+
+  const handlePublishAtCalendarChange = (date: Date | null) => {
+    if (!date) return
+
+    onChange(date)
+  }
+
+  const handlePublishAtInputChange = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      const date = event.currentTarget.value
+      const parsedDate = parse(date, inputDateFormat, new Date())
+
+      if (isValid(parsedDate)) onChange(parsedDate)
+    },
+    [onChange],
+  )
+
+  const calendarLabels: CalendarLabels = useMemo(() => getCalendarLabels(t), [t])
+
+  return (
+    <Flex flex={1} justify="space-between">
+      <DateTimeInput
+        selectTime
+        monthPickerVariant={MONTH_PICKER_VARIANT.carousel}
+        onChange={handlePublishAtCalendarChange}
+        onInputChange={handlePublishAtInputChange}
+        calendarLabels={calendarLabels}
+        value={inputValue}
+        inputValue={format(inputValue, inputDateFormat)}
+        constrainSize={false}
+        padding={0}
+        isPastDisabled
+      />
+
+      <Button
+        icon={EarthGlobeIcon}
+        mode="bleed"
+        size="default"
+        text={`${timeZone.abbreviation}`}
+        onClick={dialogTimeZoneShow}
+      />
+    </Flex>
+  )
+}
diff --git a/packages/sanity/src/core/releases/components/dialog/CreateReleaseDialog.tsx b/packages/sanity/src/core/releases/components/dialog/CreateReleaseDialog.tsx
index 727680f07f9..172cd6bb89d 100644
--- a/packages/sanity/src/core/releases/components/dialog/CreateReleaseDialog.tsx
+++ b/packages/sanity/src/core/releases/components/dialog/CreateReleaseDialog.tsx
@@ -6,10 +6,12 @@ import {type FormEvent, useCallback, useState} from 'react'
 import {Button, Dialog} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {CreatedRelease, type OriginInfo} from '../../__telemetry__/releases.telemetry'
+import {releasesLocaleNamespace} from '../../i18n'
 import {type EditableReleaseDocument} from '../../store/types'
 import {useReleaseOperations} from '../../store/useReleaseOperations'
 import {DEFAULT_RELEASE_TYPE} from '../../util/const'
 import {createReleaseId} from '../../util/createReleaseId'
+import {getIsScheduledDateInPast} from '../../util/getIsScheduledDateInPast'
 import {getReleaseIdFromReleaseDocumentId} from '../../util/getReleaseIdFromReleaseDocumentId'
 import {ReleaseForm} from './ReleaseForm'
 
@@ -24,9 +26,10 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
   const toast = useToast()
   const {createRelease} = useReleaseOperations()
   const {t} = useTranslation()
+  const {t: tRelease} = useTranslation(releasesLocaleNamespace)
   const telemetry = useTelemetry()
 
-  const [value, setValue] = useState((): EditableReleaseDocument => {
+  const [release, setRelease] = useState((): EditableReleaseDocument => {
     return {
       _id: createReleaseId(),
       metadata: {
@@ -37,16 +40,38 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
     } as const
   })
   const [isSubmitting, setIsSubmitting] = useState(false)
+  /**
+   * This state supports the scenario of:
+   * release.intendedPublishAt is set to a valid future date; but at time of submit it is in the past
+   * Without an update on this state, CreateReleaseDialog would not rerender
+   * and so date in past warning ui elements wouldn't show
+   */
+  const [, setRerenderDialog] = useState(0)
+
+  const isScheduledDateInPast = getIsScheduledDateInPast(release)
 
   const handleOnSubmit = useCallback(
     async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+
+      // re-evaluate if date is in past
+      // as dialog could have been left idle for a while
+      if (getIsScheduledDateInPast(release)) {
+        toast.push({
+          closable: true,
+          status: 'warning',
+          title: tRelease('schedule-dialog.publish-date-in-past-warning'),
+        })
+        setRerenderDialog((cur) => cur + 1)
+        return // do not submit if date is in past
+      }
+
       try {
-        event.preventDefault()
         setIsSubmitting(true)
 
         const submitValue = {
-          ...value,
-          metadata: {...value.metadata, title: value.metadata?.title?.trim()},
+          ...release,
+          metadata: {...release.metadata, title: release.metadata?.title?.trim()},
         }
         await createRelease(submitValue)
         telemetry.log(CreatedRelease, {origin})
@@ -55,7 +80,7 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
         toast.push({
           closable: true,
           status: 'error',
-          title: `Failed to create release`,
+          title: t('release.toast.create-release-error.title'),
         })
       } finally {
         // TODO: Remove this! temporary fix to give some time for the release to be created and the releases store state updated before closing the dialog.
@@ -63,14 +88,14 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
         // TODO: Remove the upper part
 
         setIsSubmitting(false)
-        onSubmit(getReleaseIdFromReleaseDocumentId(value._id))
+        onSubmit(getReleaseIdFromReleaseDocumentId(release._id))
       }
     },
-    [value, createRelease, telemetry, origin, toast, onSubmit],
+    [release, toast, tRelease, createRelease, telemetry, origin, t, onSubmit],
   )
 
   const handleOnChange = useCallback((changedValue: EditableReleaseDocument) => {
-    setValue(changedValue)
+    setRelease(changedValue)
   }, [])
 
   const dialogTitle = t('release.dialog.create.title')
@@ -85,12 +110,16 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
     >
       <form onSubmit={handleOnSubmit}>
         <Box paddingX={4} paddingBottom={4}>
-          <ReleaseForm onChange={handleOnChange} value={value} />
+          <ReleaseForm onChange={handleOnChange} value={release} />
         </Box>
         <Flex justify="flex-end" paddingTop={5}>
           <Button
+            tooltipProps={{
+              disabled: !isScheduledDateInPast,
+              content: tRelease('schedule-dialog.publish-date-in-past-warning'),
+            }}
             size="large"
-            disabled={isSubmitting}
+            disabled={isSubmitting || isScheduledDateInPast}
             iconRight={ArrowRightIcon}
             type="submit"
             text={dialogTitle}
diff --git a/packages/sanity/src/core/releases/components/dialog/ReleaseForm.tsx b/packages/sanity/src/core/releases/components/dialog/ReleaseForm.tsx
index 949804a11ad..5a9c3d4c3a8 100644
--- a/packages/sanity/src/core/releases/components/dialog/ReleaseForm.tsx
+++ b/packages/sanity/src/core/releases/components/dialog/ReleaseForm.tsx
@@ -1,17 +1,14 @@
-import {EarthGlobeIcon, InfoOutlineIcon} from '@sanity/icons'
+import {InfoOutlineIcon} from '@sanity/icons'
 import {Card, Flex, Stack, TabList, TabPanel, Text} from '@sanity/ui'
-import {format, isValid} from 'date-fns'
-import {useCallback, useEffect, useMemo, useState} from 'react'
+import {addMinutes, isValid} from 'date-fns'
+import {useCallback, useEffect, useState} from 'react'
 
-import {Button, Tab, Tooltip} from '../../../../ui-components'
-import {MONTH_PICKER_VARIANT} from '../../../components/inputs/DateInputs/calendar/Calendar'
-import {type CalendarLabels} from '../../../components/inputs/DateInputs/calendar/types'
-import {DateTimeInput} from '../../../components/inputs/DateInputs/DateTimeInput'
-import {getCalendarLabels} from '../../../form/inputs/DateInputs/utils'
+import {Tab, Tooltip} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import useDialogTimeZone from '../../../scheduledPublishing/hooks/useDialogTimeZone'
 import useTimeZone from '../../../scheduledPublishing/hooks/useTimeZone'
 import {type EditableReleaseDocument, type ReleaseType} from '../../store/types'
+import {ScheduleDatePicker} from '../ScheduleDatePicker'
 import {TitleDescriptionForm} from './TitleDescriptionForm'
 
 const RELEASE_TYPES: ReleaseType[] = ['asap', 'scheduled', 'undecided']
@@ -23,23 +20,19 @@ export function ReleaseForm(props: {
 }): React.JSX.Element {
   const {onChange, value} = props
   const {releaseType} = value.metadata || {}
-  const publishAt = value.metadata.intendedPublishAt
   const {t} = useTranslation()
 
-  const {DialogTimeZone, dialogProps, dialogTimeZoneShow} = useDialogTimeZone()
+  const {DialogTimeZone, dialogProps} = useDialogTimeZone()
   const {timeZone, utcToCurrentZoneDate} = useTimeZone()
   const [currentTimezone, setCurrentTimezone] = useState<string | null>(timeZone.name)
 
   const [buttonReleaseType, setButtonReleaseType] = useState<ReleaseType>(releaseType ?? 'asap')
 
-  const calendarLabels: CalendarLabels = useMemo(() => getCalendarLabels(t), [t])
-  const [inputValue, setInputValue] = useState<Date>(publishAt ? new Date(publishAt) : new Date())
+  const [intendedPublishAt, setIntendedPublishAt] = useState<Date | undefined>()
 
   const handleBundlePublishAtCalendarChange = useCallback(
-    (date: Date | null) => {
-      if (!date) return
-
-      setInputValue(date)
+    (date: Date) => {
+      setIntendedPublishAt(date)
       onChange({...value, metadata: {...value.metadata, intendedPublishAt: date.toISOString()}})
     },
     [onChange, value],
@@ -48,9 +41,21 @@ export function ReleaseForm(props: {
   const handleButtonReleaseTypeChange = useCallback(
     (pickedReleaseType: ReleaseType) => {
       setButtonReleaseType(pickedReleaseType)
+      // select time 1 minute from now so that form doesn't immediately
+      // evaluate to error
+      const nextInputValue = addMinutes(new Date().setSeconds(0, 0), 1)
+      if (pickedReleaseType === 'scheduled') {
+        setIntendedPublishAt(nextInputValue)
+      }
+
       onChange({
         ...value,
-        metadata: {...value.metadata, releaseType: pickedReleaseType, intendedPublishAt: undefined},
+        metadata: {
+          ...value.metadata,
+          releaseType: pickedReleaseType,
+          intendedPublishAt:
+            (pickedReleaseType === 'scheduled' && nextInputValue.toISOString()) || undefined,
+        },
       })
     },
     [onChange, value],
@@ -76,12 +81,12 @@ export function ReleaseForm(props: {
      */
     if (timeZone.name !== currentTimezone) {
       setCurrentTimezone(timeZone.name)
-      if (isValid(inputValue)) {
-        const currentZoneDate = utcToCurrentZoneDate(inputValue)
-        setInputValue(currentZoneDate)
+      if (intendedPublishAt && isValid(intendedPublishAt)) {
+        const currentZoneDate = utcToCurrentZoneDate(intendedPublishAt)
+        setIntendedPublishAt(currentZoneDate)
       }
     }
-  }, [currentTimezone, inputValue, timeZone, utcToCurrentZoneDate])
+  }, [currentTimezone, intendedPublishAt, timeZone, utcToCurrentZoneDate])
 
   return (
     <Stack space={5}>
@@ -107,7 +112,13 @@ export function ReleaseForm(props: {
           </span>
         </Text>
         <Flex gap={1}>
-          <Card border overflow="hidden" padding={1} style={{borderRadius: 3.5}} tone="inherit">
+          <Card
+            border
+            overflow="hidden"
+            padding={1}
+            style={{borderRadius: 3.5, alignSelf: 'baseline'}}
+            tone="inherit"
+          >
             <Flex gap={1}>
               <TabList space={0.5}>
                 {RELEASE_TYPES.map((type) => (
@@ -131,27 +142,10 @@ export function ReleaseForm(props: {
               style={{outline: 'none'}}
               tabIndex={-1}
             >
-              <Flex flex={1} justify="space-between">
-                <DateTimeInput
-                  selectTime
-                  monthPickerVariant={MONTH_PICKER_VARIANT.carousel}
-                  onChange={handleBundlePublishAtCalendarChange}
-                  calendarLabels={calendarLabels}
-                  value={inputValue}
-                  inputValue={format(inputValue, 'PPp')}
-                  constrainSize={false}
-                  padding={0}
-                  readOnly
-                />
-
-                <Button
-                  icon={EarthGlobeIcon}
-                  mode="bleed"
-                  size="default"
-                  text={`${timeZone.abbreviation}`}
-                  onClick={dialogTimeZoneShow}
-                />
-              </Flex>
+              <ScheduleDatePicker
+                initialValue={intendedPublishAt || new Date()}
+                onChange={handleBundlePublishAtCalendarChange}
+              />
             </TabPanel>
           )}
         </Flex>
diff --git a/packages/sanity/src/core/releases/components/dialog/__tests__/CreateReleaseDialog.test.tsx b/packages/sanity/src/core/releases/components/dialog/__tests__/CreateReleaseDialog.test.tsx
index 93c5d3c9d9a..88c6453e5da 100644
--- a/packages/sanity/src/core/releases/components/dialog/__tests__/CreateReleaseDialog.test.tsx
+++ b/packages/sanity/src/core/releases/components/dialog/__tests__/CreateReleaseDialog.test.tsx
@@ -22,6 +22,13 @@ describe('CreateReleaseDialog', () => {
 
       const wrapper = await createTestProvider()
       render(<CreateReleaseDialog onCancel={onCancelMock} onSubmit={onSubmitMock} />, {wrapper})
+
+      await waitFor(
+        () => {
+          expect(screen.queryByTestId('loading-block')).not.toBeInTheDocument()
+        },
+        {timeout: 5000, interval: 500},
+      )
     })
 
     it('should render the dialog', () => {
diff --git a/packages/sanity/src/core/releases/components/documentHeader/dialog/CopyToNewReleaseDialog.tsx b/packages/sanity/src/core/releases/components/documentHeader/dialog/CopyToNewReleaseDialog.tsx
index b031c9beac9..769b2bd1bcf 100644
--- a/packages/sanity/src/core/releases/components/documentHeader/dialog/CopyToNewReleaseDialog.tsx
+++ b/packages/sanity/src/core/releases/components/documentHeader/dialog/CopyToNewReleaseDialog.tsx
@@ -1,5 +1,5 @@
 import {useTelemetry} from '@sanity/telemetry/react'
-import {type BadgeTone, Box, Flex, Text, useToast} from '@sanity/ui'
+import {type BadgeTone, Box, Card, Flex, Text, useToast} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
 import {Dialog} from '../../../../../ui-components/dialog/Dialog'
@@ -8,10 +8,12 @@ import {useSchema} from '../../../../hooks/useSchema'
 import {useTranslation} from '../../../../i18n/hooks/useTranslation'
 import {Preview} from '../../../../preview/components/Preview'
 import {CreatedRelease} from '../../../__telemetry__/releases.telemetry'
+import {releasesLocaleNamespace} from '../../../i18n'
 import {type EditableReleaseDocument} from '../../../store/types'
 import {useReleaseOperations} from '../../../store/useReleaseOperations'
 import {DEFAULT_RELEASE_TYPE} from '../../../util/const'
 import {createReleaseId} from '../../../util/createReleaseId'
+import {getIsScheduledDateInPast} from '../../../util/getIsScheduledDateInPast'
 import {ReleaseForm} from '../../dialog/ReleaseForm'
 import {ReleaseAvatar} from '../../ReleaseAvatar'
 
@@ -25,14 +27,15 @@ export function CopyToNewReleaseDialog(props: {
 }): React.JSX.Element {
   const {onClose, documentId, documentType, tone, title, onCreateVersion} = props
   const {t} = useTranslation()
+  const {t: tRelease} = useTranslation(releasesLocaleNamespace)
   const toast = useToast()
 
   const schema = useSchema()
   const schemaType = schema.get(documentType)
 
-  const [newReleaseId] = useState(createReleaseId())
+  const [newReleaseId] = useState(createReleaseId)
 
-  const [value, setValue] = useState((): EditableReleaseDocument => {
+  const [release, setRelease] = useState((): EditableReleaseDocument => {
     return {
       _id: newReleaseId,
       metadata: {
@@ -43,14 +46,23 @@ export function CopyToNewReleaseDialog(props: {
     } as const
   })
   const [isSubmitting, setIsSubmitting] = useState(false)
+  /**
+   * This state supports the scenario of:
+   * release.intendedPublishAt is set to a valid future date; but at time of submit it is in the past
+   * Without an update on this state, CopyToNewReleaseDialog would not rerender
+   * and so date in past warning ui elements wouldn't show
+   */
+  const [, setRerenderDialog] = useState(0)
 
   const telemetry = useTelemetry()
   const {createRelease} = useReleaseOperations()
 
   const displayTitle = title || t('release.placeholder-untitled-release')
 
+  const isScheduledDateInPast = getIsScheduledDateInPast(release)
+
   const handleOnChange = useCallback((changedValue: EditableReleaseDocument) => {
-    setValue(changedValue)
+    setRelease(changedValue)
   }, [])
 
   const handleAddVersion = useCallback(async () => {
@@ -58,10 +70,17 @@ export function CopyToNewReleaseDialog(props: {
   }, [onCreateVersion, newReleaseId])
 
   const handleCreateRelease = useCallback(async () => {
+    // re-evaluate if date is in past
+    // as dialog could have been left idle for a while
+    if (getIsScheduledDateInPast(release)) {
+      setRerenderDialog((cur) => cur + 1)
+      return // do not submit if date is in past
+    }
+
     try {
       setIsSubmitting(true)
 
-      await createRelease(value)
+      await createRelease(release)
 
       await handleAddVersion()
       telemetry.log(CreatedRelease, {origin: 'document-panel'})
@@ -70,18 +89,18 @@ export function CopyToNewReleaseDialog(props: {
       toast.push({
         closable: true,
         status: 'error',
-        title: `Failed to create release`,
+        title: t('release.toast.create-release-error.title'),
         description: err.message,
       })
     } finally {
       setIsSubmitting(false)
     }
-  }, [createRelease, handleAddVersion, telemetry, toast, value])
+  }, [release, toast, createRelease, handleAddVersion, telemetry, t])
 
   return (
     <Dialog
       id={'create-release-dialog'}
-      header={'Copy version to new release'}
+      header={t('release.dialog.copy-to-release.title')}
       onClickOutside={onClose}
       onClose={onClose}
       padding={false}
@@ -92,9 +111,9 @@ export function CopyToNewReleaseDialog(props: {
           onClick: onClose,
         },
         confirmButton: {
-          text: 'Add to release',
+          text: t('release.action.add-to-new-release'),
           onClick: handleCreateRelease,
-          disabled: isSubmitting,
+          disabled: isSubmitting || isScheduledDateInPast,
           tone: 'primary',
         },
       }}
@@ -133,7 +152,12 @@ export function CopyToNewReleaseDialog(props: {
       </Box>
 
       <Box paddingX={5} paddingY={3}>
-        <ReleaseForm onChange={handleOnChange} value={value} />
+        {isScheduledDateInPast && (
+          <Card padding={3} marginBottom={3} radius={2} shadow={1} tone="critical">
+            <Text size={1}>{tRelease('schedule-dialog.publish-date-in-past-warning')}</Text>
+          </Card>
+        )}
+        <ReleaseForm onChange={handleOnChange} value={release} />
       </Box>
     </Dialog>
   )
diff --git a/packages/sanity/src/core/releases/i18n/resources.ts b/packages/sanity/src/core/releases/i18n/resources.ts
index e9fba8e07d9..796d11fdcbd 100644
--- a/packages/sanity/src/core/releases/i18n/resources.ts
+++ b/packages/sanity/src/core/releases/i18n/resources.ts
@@ -247,6 +247,9 @@ const releasesLocaleStrings = {
   /** Description shown in unschedule relaease dialog */
   'unschedule-dialog.confirm-description':
     'The release will no longer be published on the scheduled date',
+  /** Description for warning that the published schedule time is in the past */
+  'schedule-dialog.publish-date-in-past-warning':
+    'Schedule this release for a future time and date.',
 
   /** Placeholder for search of documents in a release */
   'search-documents-placeholder': 'Search documents',
diff --git a/packages/sanity/src/core/releases/tool/components/releaseCTAButtons/ReleaseScheduleButton.tsx b/packages/sanity/src/core/releases/tool/components/releaseCTAButtons/ReleaseScheduleButton.tsx
index 365e6cf81cf..5c82865e546 100644
--- a/packages/sanity/src/core/releases/tool/components/releaseCTAButtons/ReleaseScheduleButton.tsx
+++ b/packages/sanity/src/core/releases/tool/components/releaseCTAButtons/ReleaseScheduleButton.tsx
@@ -1,7 +1,7 @@
 import {ClockIcon, ErrorOutlineIcon} from '@sanity/icons'
 import {useTelemetry} from '@sanity/telemetry/react'
-import {Flex, Stack, Text, useToast} from '@sanity/ui'
-import {format, isValid, parse} from 'date-fns'
+import {Card, Flex, Stack, Text, useToast} from '@sanity/ui'
+import {format, isBefore, isValid, parse, startOfMinute} from 'date-fns'
 import {useCallback, useMemo, useState} from 'react'
 
 import {Button, Dialog} from '../../../../../ui-components'
@@ -34,14 +34,31 @@ export const ReleaseScheduleButton = ({
   const telemetry = useTelemetry()
   const [status, setStatus] = useState<'idle' | 'confirm' | 'scheduling'>('idle')
   const [publishAt, setPublishAt] = useState<Date | undefined>()
+  /**
+   * This state supports the scenario of:
+   * publishAt is set to a valid future date; but at time of submit it is in the past
+   * Without an update on this state, ReleaseScheduledButton would not rerender
+   * and so date in past warning ui elements wouldn't show
+   */
+  const [rerenderDialog, setRerenderDialog] = useState(0)
 
   const isValidatingDocuments = documents.some(({validation}) => validation.isValidating)
   const hasDocumentValidationErrors = documents.some(({validation}) => validation.hasError)
-  const isScheduleButtonDisabled = disabled || isValidatingDocuments || hasDocumentValidationErrors
+  const isScheduleButtonDisabled = disabled || isValidatingDocuments
+
+  const isScheduledDateInPast = useCallback(() => {
+    return isBefore(publishAt || new Date(), new Date())
+  }, [publishAt])
 
   const handleConfirmSchedule = useCallback(async () => {
     if (!publishAt) return
 
+    if (isScheduledDateInPast()) {
+      // rerender dialog to recalculate isScheduledDateInPast
+      setRerenderDialog((cur) => cur + 1)
+      return
+    }
+
     try {
       setStatus('scheduling')
       await schedule(release._id, publishAt)
@@ -76,7 +93,16 @@ export const ReleaseScheduleButton = ({
     } finally {
       setStatus('idle')
     }
-  }, [schedule, release._id, release.metadata.title, publishAt, telemetry, toast, t])
+  }, [
+    publishAt,
+    isScheduledDateInPast,
+    schedule,
+    release._id,
+    release.metadata.title,
+    telemetry,
+    toast,
+    t,
+  ])
 
   const {t: coreT} = useTranslation()
   const calendarLabels: CalendarLabels = useMemo(() => getCalendarLabels(coreT), [coreT])
@@ -84,7 +110,7 @@ export const ReleaseScheduleButton = ({
   const handleBundlePublishAtCalendarChange = useCallback((date: Date | null) => {
     if (!date) return
 
-    setPublishAt(date)
+    setPublishAt(startOfMinute(date))
   }, [])
 
   const handleBundleInputChange = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
@@ -99,9 +125,17 @@ export const ReleaseScheduleButton = ({
   const confirmScheduleDialog = useMemo(() => {
     if (status === 'idle') return null
 
+    const _isScheduledDateInPast = isScheduledDateInPast()
+
     return (
       <Dialog
         id="confirm-schedule-dialog"
+        /**
+         * rerenderDialog should force this function to rerun
+         * since the selected scheduled date was in the future when selected
+         * but at time of submit it is in the past
+         */
+        key={rerenderDialog}
         header={t('schedule-dialog.confirm-title', {
           documentsLength: documents.length,
           count: documents.length,
@@ -113,11 +147,16 @@ export const ReleaseScheduleButton = ({
             tone: 'default',
             onClick: handleConfirmSchedule,
             loading: status === 'scheduling',
-            disabled: status === 'scheduling',
+            disabled: _isScheduledDateInPast || status === 'scheduling',
           },
         }}
       >
         <Stack space={3}>
+          {_isScheduledDateInPast && (
+            <Card marginBottom={1} padding={2} radius={2} shadow={1} tone="critical">
+              <Text size={1}>{t('schedule-dialog.publish-date-in-past-warning')}</Text>
+            </Card>
+          )}
           <label>
             <Stack space={3}>
               <Text size={1} weight="semibold">
@@ -132,6 +171,7 @@ export const ReleaseScheduleButton = ({
                 calendarLabels={calendarLabels}
                 inputValue={publishAt ? format(publishAt, 'PP HH:mm') : ''}
                 constrainSize={false}
+                isPastDisabled
               />
             </Stack>
           </label>
@@ -150,6 +190,7 @@ export const ReleaseScheduleButton = ({
     )
   }, [
     status,
+    isScheduledDateInPast,
     t,
     documents.length,
     handleConfirmSchedule,
@@ -158,6 +199,7 @@ export const ReleaseScheduleButton = ({
     publishAt,
     calendarLabels,
     release.metadata.title,
+    rerenderDialog,
   ])
 
   const handleOnInitialSchedule = useCallback(() => {
diff --git a/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx b/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx
index bd6d140dc62..a237cca6464 100644
--- a/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/ReleaseTypePicker.tsx
@@ -1,6 +1,6 @@
 import {LockIcon} from '@sanity/icons'
-import {Card, Flex, Spinner, Stack, TabList, Text, useClickOutsideEvent} from '@sanity/ui'
-import {format, isBefore, isValid} from 'date-fns'
+import {Card, Flex, Spinner, Stack, TabList, Text, useClickOutsideEvent, useToast} from '@sanity/ui'
+import {format, isBefore, isValid, parse, startOfMinute} from 'date-fns'
 import {isEqual} from 'lodash'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
@@ -16,9 +16,12 @@ import {ReleaseAvatar} from '../../components/ReleaseAvatar'
 import {releasesLocaleNamespace} from '../../i18n'
 import {type ReleaseDocument, type ReleaseType} from '../../store'
 import {useReleaseOperations} from '../../store/useReleaseOperations'
+import {getIsScheduledDateInPast} from '../../util/getIsScheduledDateInPast'
 import {getReleaseTone} from '../../util/getReleaseTone'
 import {getPublishDateFromRelease, isReleaseScheduledOrScheduling} from '../../util/util'
 
+const dateInputFormat = 'PP HH:mm'
+
 export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.Element {
   const {release} = props
 
@@ -30,18 +33,20 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
   const {t: tRelease} = useTranslation(releasesLocaleNamespace)
   const {t} = useTranslation()
   const {updateRelease} = useReleaseOperations()
+  const toast = useToast()
 
   const [open, setOpen] = useState(false)
-  const [dateInputOpen, setDateInputOpen] = useState(release.metadata.releaseType === 'scheduled')
   const [releaseType, setReleaseType] = useState<ReleaseType>(release.metadata.releaseType)
-  const publishDate = useMemo(() => getPublishDateFromRelease(release) || new Date(), [release])
-
-  const [updatedDate, setUpdatedDate] = useState<string | undefined>(publishDate.toDateString())
+  const publishDate = useMemo(() => getPublishDateFromRelease(release), [release])
   const [isUpdating, setIsUpdating] = useState(false)
+  const [isIntendedScheduleDateInPast, setIsIntendedScheduleDateInPast] = useState(
+    publishDate && isBefore(new Date(publishDate), new Date()),
+  )
 
-  const [inputValue, setInputValue] = useState<Date | undefined>(
+  const [intendedPublishAt, setIntendedPublishAt] = useState<Date | undefined>(
     publishDate ? new Date(publishDate) : undefined,
   )
+  const updatedDate = intendedPublishAt?.toISOString()
 
   const {timeZone, utcToCurrentZoneDate} = useTimeZone()
   const [currentTimezone, setCurrentTimezone] = useState<string | null>(timeZone.name)
@@ -60,15 +65,34 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
       }
 
       if (!isEqual(newRelease, release)) {
-        setIsUpdating(true)
-        updateRelease(newRelease).then(() => {
-          setIsUpdating(false)
-        })
-        setDateInputOpen(releaseType === 'scheduled')
+        /**
+         * If in past, the reset type and intendedPublish to the actual release values
+         * and discard the changes made
+         */
+        if (getIsScheduledDateInPast(newRelease)) {
+          setReleaseType(release.metadata.releaseType)
+          setIntendedPublishAt(
+            release.metadata.intendedPublishAt
+              ? new Date(release.metadata.intendedPublishAt)
+              : undefined,
+          )
+
+          toast.push({
+            closable: true,
+            status: 'warning',
+            title: tRelease('schedule-dialog.publish-date-in-past-warning'),
+          })
+        } else {
+          setIsUpdating(true)
+          updateRelease(newRelease).then(() => {
+            setIsUpdating(false)
+          })
+        }
       }
+
       setOpen(false)
     }
-  }, [open, updateRelease, release, updatedDate, releaseType])
+  }, [open, release, updatedDate, releaseType, toast, tRelease, updateRelease])
 
   useClickOutsideEvent(close, () => [
     popoverRef.current,
@@ -85,10 +109,10 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
       setCurrentTimezone(timeZone.name)
       if (updatedDate && isValid(new Date(updatedDate))) {
         const currentZoneDate = utcToCurrentZoneDate(new Date(updatedDate))
-        setInputValue(currentZoneDate)
+        setIntendedPublishAt(currentZoneDate)
       }
     }
-  }, [currentTimezone, inputValue, timeZone, updatedDate, utcToCurrentZoneDate])
+  }, [currentTimezone, intendedPublishAt, timeZone, updatedDate, utcToCurrentZoneDate])
 
   const isPublishDateInPast = !!publishDate && isBefore(new Date(publishDate), new Date())
   const isReleaseScheduled = isReleaseScheduledOrScheduling(release)
@@ -105,12 +129,12 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
 
     if (releaseType === 'asap') return t('release.type.asap')
     if (releaseType === 'undecided') return t('release.type.undecided')
-    const labelDate = publishDate || inputValue
+    const labelDate = publishDate || intendedPublishAt
     if (!labelDate) return null
 
     return format(new Date(labelDate), `PPpp`)
   }, [
-    inputValue,
+    intendedPublishAt,
     isPublishDateInPast,
     publishDate,
     release.publishAt,
@@ -121,29 +145,27 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
   ])
 
   const handleButtonReleaseTypeChange = useCallback((pickedReleaseType: ReleaseType) => {
-    setDateInputOpen(pickedReleaseType === 'scheduled')
-
     setReleaseType(pickedReleaseType)
-    const nextPublishAt = pickedReleaseType === 'scheduled' ? new Date() : undefined
-    setUpdatedDate(nextPublishAt?.toISOString())
-    setInputValue(nextPublishAt)
+    const nextPublishAt = pickedReleaseType === 'scheduled' ? startOfMinute(new Date()) : undefined
+    setIntendedPublishAt(nextPublishAt)
+    setIsIntendedScheduleDateInPast(true)
   }, [])
 
-  const handleBundlePublishAtChange = useCallback((date: Date | null) => {
+  const handlePublishAtCalendarChange = useCallback((date: Date | null) => {
     if (!date) return
 
-    setInputValue(new Date(date))
-
-    setUpdatedDate(date ? date.toISOString() : undefined)
+    const cleanDate = startOfMinute(new Date(date))
+    setIsIntendedScheduleDateInPast(isBefore(cleanDate, new Date()))
+    setIntendedPublishAt(cleanDate)
   }, [])
 
-  const handleInputChange = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
-    const parsedDate = new Date(event.currentTarget.value)
+  const handlePublishAtInputChange = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+    const parsedDate = parse(event.currentTarget.value, dateInputFormat, new Date())
 
     if (isValid(parsedDate)) {
-      setInputValue(parsedDate)
+      setIsIntendedScheduleDateInPast(isBefore(parsedDate, new Date()))
 
-      setUpdatedDate(parsedDate.toISOString())
+      setIntendedPublishAt(startOfMinute(parsedDate))
     }
   }, [])
 
@@ -178,22 +200,26 @@ export function ReleaseTypePicker(props: {release: ReleaseDocument}): React.JSX.
             label={t('release.type.undecided')}
           />
         </TabList>
-        {dateInputOpen && (
+        {releaseType === 'scheduled' && (
           <>
+            {isIntendedScheduleDateInPast && (
+              <Card margin={1} padding={2} radius={2} shadow={1} tone="critical">
+                <Text size={1}>{tRelease('schedule-dialog.publish-date-in-past-warning')}</Text>
+              </Card>
+            )}
             <LazyTextInput
-              value={inputValue ? format(inputValue, 'PPp') : undefined}
-              onChange={handleInputChange}
-              readOnly
+              value={intendedPublishAt ? format(intendedPublishAt, dateInputFormat) : undefined}
+              onChange={handlePublishAtInputChange}
             />
-
             <DatePicker
               ref={datePickerRef}
               monthPickerVariant={MONTH_PICKER_VARIANT.carousel}
               calendarLabels={calendarLabels}
               selectTime
               padding={0}
-              value={inputValue}
-              onChange={handleBundlePublishAtChange}
+              value={intendedPublishAt}
+              onChange={handlePublishAtCalendarChange}
+              isPastDisabled
               showTimezone
             />
           </>
diff --git a/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseTypePicker.test.tsx b/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseTypePicker.test.tsx
index 4d6c1ac769c..09d4e62af78 100644
--- a/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseTypePicker.test.tsx
+++ b/packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseTypePicker.test.tsx
@@ -146,10 +146,12 @@ describe('ReleaseTypePicker', () => {
       const scheduledTab = screen.getByText('At time')
       fireEvent.click(scheduledTab)
 
-      const Calendar = getByDataUi(document.body, 'CalendarMonth')
+      const Calendar = getByDataUi(document.body, 'Calendar')
+      const CalendarMonth = getByDataUi(document.body, 'CalendarMonth')
 
       // Select the 10th day in the calendar month
-      fireEvent.click(within(Calendar).getByText('10'))
+      fireEvent.click(within(Calendar).getByTestId('calendar-next-month'))
+      fireEvent.click(within(CalendarMonth).getByText('10'))
       fireEvent.change(screen.getByLabelText('Select hour'), {target: {value: 10}})
       fireEvent.change(screen.getByLabelText('Select minute'), {target: {value: 55}})
       expect(mockUpdateRelease).not.toHaveBeenCalled()
@@ -217,8 +219,10 @@ describe('ReleaseTypePicker', () => {
       fireEvent.click(screen.getByText('Undecided'))
       fireEvent.click(screen.getByTestId('release-type-picker'))
 
-      // Check if the spinner is displayed while updating
-      screen.getByTestId('updating-release-spinner')
+      await waitFor(() => {
+        // Check if the spinner is displayed while updating
+        screen.queryByTestId('updating-release-spinner')
+      })
     })
   })
 })
diff --git a/packages/sanity/src/core/releases/util/getIsScheduledDateInPast.ts b/packages/sanity/src/core/releases/util/getIsScheduledDateInPast.ts
new file mode 100644
index 00000000000..c7a9e592609
--- /dev/null
+++ b/packages/sanity/src/core/releases/util/getIsScheduledDateInPast.ts
@@ -0,0 +1,11 @@
+import {isPast} from 'date-fns'
+
+import {type EditableReleaseDocument} from '../store/types'
+
+/** @internal */
+export const getIsScheduledDateInPast = (value: EditableReleaseDocument) =>
+  Boolean(
+    value.metadata.releaseType === 'scheduled' &&
+      value.metadata.intendedPublishAt &&
+      isPast(new Date(value.metadata.intendedPublishAt)),
+  )