fix(ui): ensure that schedule publishing time picker can only be in the future (#13128)

Previously you could've selected a date and time in the past to schedule
publish.

Now we ensure that there is a minimum time and date for scheduled
publishing date picker.


Additionally updated the disabled items to be more visually obvious that
they are disabled:
<img width="404" height="336" alt="image"
src="https://github.com/user-attachments/assets/1f4ea36a-267e-4ae5-91e4-92bb84d7889c"
/>

packages/ui/src/elements/DatePicker/index.scss

@@ -330,6 +330,16 @@ $cal-icon-width: 18px;
       border-radius: 0;
     }
 
+    .react-datepicker__month .react-datepicker__day {
+      &.react-datepicker__day--disabled {
+        color: var(--theme-elevation-200);
+
+        &:hover {
+          background: none;
+        }
+      }
+    }
+
     .react-datepicker__navigation--next--with-time:not(
         .react-datepicker__navigation--next--with-today-button
       ) {
@@ -343,6 +353,13 @@ $cal-icon-width: 18px;
       li.react-datepicker__time-list-item {
       line-height: 20px;
       font-size: base(0.5);
+
+      &.react-datepicker__time-list-item--disabled {
+        color: var(--theme-elevation-200);
+        &:hover {
+          background: none;
+        }
+      }
     }
 
     &__appearance--dayOnly,

packages/ui/src/elements/PublishButton/ScheduleDrawer/index.tsx

@@ -6,6 +6,7 @@ import type { Column, SchedulePublish, Where } from 'payload'
 import { TZDateMini as TZDate } from '@date-fns/tz/date/mini'
 import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
+import { endOfToday, isToday, startOfDay } from 'date-fns'
 import { transpose } from 'date-fns/transpose'
 import * as qs from 'qs-esm'
 import React, { useCallback, useMemo } from 'react'
@@ -28,8 +29,8 @@ import { DatePickerField } from '../../DatePicker/index.js'
 import { Drawer } from '../../Drawer/index.js'
 import { Gutter } from '../../Gutter/index.js'
 import { ReactSelect } from '../../ReactSelect/index.js'
-import { ShimmerEffect } from '../../ShimmerEffect/index.js'
 import './index.scss'
+import { ShimmerEffect } from '../../ShimmerEffect/index.js'
 import { Table } from '../../Table/index.js'
 import { TimezonePicker } from '../../TimezonePicker/index.js'
 import { buildUpcomingColumns } from './buildUpcomingColumns.js'
@@ -290,6 +291,14 @@ export const ScheduleDrawer: React.FC<Props> = ({ slug, defaultType, schedulePub
     }
   }, [upcoming, fetchUpcoming])
 
+  const minTime = useMemo(() => {
+    if (date && isToday(date)) {
+      return new Date()
+    }
+
+    return startOfDay(new Date())
+  }, [date])
+
   return (
     <Drawer
       className={baseClass}
@@ -330,7 +339,9 @@ export const ScheduleDrawer: React.FC<Props> = ({ slug, defaultType, schedulePub
         <FieldLabel label={t('general:time')} path={'time'} required />
         <DatePickerField
           id="time"
+          maxTime={endOfToday()}
           minDate={new Date()}
+          minTime={minTime}
           onChange={(e) => onChangeDate(e)}
           pickerAppearance="dayAndTime"
           readOnly={processing}