From 77d4ca91d0344f80f5d69b17f832d16a2bea7f5f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 16:04:25 +0100
Subject: [PATCH 01/13] Add a "today" shortcut for the date picker

---
 .../components/ui/DatePicker/DatePicker.vue   | 38 +++++++++++++++++
 .../ui/DateRangePicker/DateRangePicker.vue    | 42 ++++++++++++++++++-
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 669158a0aa..b5d5765ac8 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { config } from '@api';
 import { computed } from 'vue';
+import { getLocalTimeZone, now } from '@internationalized/date';
 import {
     DatePickerAnchor,
     DatePickerContent,
@@ -99,6 +100,19 @@ const calendarEvents = computed(() => ({
     },
 }));
 
+const selectToday = () => {
+    if (props.disabled || props.readOnly) {
+        return;
+    }
+
+    let value = now(getLocalTimeZone()).set({ millisecond: 0 });
+    if (props.granularity === 'day') {
+        value = value.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+    }
+
+    emit('update:modelValue', value);
+};
+
 const timeZoneName = computed(() => props.modelValue?.timeZone ?? null);
 
 const timeZoneLabel = computed(() => {
@@ -233,11 +247,35 @@ const getInputLabel = (part) => {
             >
                 <Card class="w-[20rem]">
                     <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                    <div
+                        class="flex justify-end"
+                    >
+                        <Button
+                            type="button"
+                            variant="subtle"
+                            size="xs"
+                            :text="__('Today')"
+                            :disabled="disabled || readOnly"
+                            @click="selectToday"
+                        />
+                    </div>
                 </Card>
             </DatePickerContent>
 
             <Card v-if="inline" class="mt-2">
                 <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                <div
+                    class="flex justify-end border-t border-gray-200 px-3 py-2 dark:border-gray-700"
+                >
+                    <Button
+                        type="button"
+                        variant="subtle"
+                        size="sm"
+                        :text="__('Today')"
+                        :disabled="disabled || readOnly"
+                        @click="selectToday"
+                    />
+                </div>
             </Card>
         </DatePickerRoot>
     </div>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 6207a027a0..fafb9472a3 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -26,7 +26,7 @@ import Calendar from '../Calendar/Calendar.vue';
 import Icon from '../Icon/Icon.vue';
 import Text from '../Text.vue';
 import TimezoneHoverCard from '../TimezoneHoverCard.vue';
-import { parseAbsoluteToLocal } from '@internationalized/date';
+import { getLocalTimeZone, now, parseAbsoluteToLocal } from '@internationalized/date';
 import { getAdditionalTimezones } from '../DatePicker/util.js';
 
 const emit = defineEmits(['update:modelValue']);
@@ -101,6 +101,22 @@ const calendarEvents = computed(() => ({
     },
 }));
 
+const selectToday = () => {
+    if (props.disabled || props.readOnly) {
+        return;
+    }
+
+    const tz = getLocalTimeZone();
+    let start = now(tz).set({ millisecond: 0 });
+    let end = now(tz).set({ millisecond: 0 });
+    if (props.granularity === 'day') {
+        start = start.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+        end = end.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+    }
+
+    emit('update:modelValue', { start, end });
+};
+
 const timeZoneName = computed(() => props.modelValue?.start?.timeZone ?? null);
 
 const timeZoneLabel = computed(() => {
@@ -203,11 +219,35 @@ const hoverCardDate = computed(() => {
             >
                 <Card class="w-[20rem]">
                     <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                    <div
+                        class="flex justify-end border-t border-gray-200 px-3 py-2 dark:border-gray-700"
+                    >
+                        <Button
+                            type="button"
+                            variant="subtle"
+                            size="sm"
+                            :text="__('Today')"
+                            :disabled="disabled || readOnly"
+                            @click="selectToday"
+                        />
+                    </div>
                 </Card>
             </DateRangePickerContent>
 
             <Card v-if="inline" class="mt-2">
                 <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                <div
+                    class="flex justify-end border-t border-gray-200 px-3 py-2 dark:border-gray-700"
+                >
+                    <Button
+                        type="button"
+                        variant="subtle"
+                        size="sm"
+                        :text="__('Today')"
+                        :disabled="disabled || readOnly"
+                        @click="selectToday"
+                    />
+                </div>
             </Card>
         </DateRangePickerRoot>
     </div>

From 27878128b898731c10499d1cc12f033ceb6abb12 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 16:06:58 +0100
Subject: [PATCH 02/13] Add a "today" shortcut for the date picker

---
 resources/js/components/ui/DatePicker/DatePicker.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index b5d5765ac8..cf6c177509 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -265,12 +265,12 @@ const getInputLabel = (part) => {
             <Card v-if="inline" class="mt-2">
                 <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
                 <div
-                    class="flex justify-end border-t border-gray-200 px-3 py-2 dark:border-gray-700"
+                    class="flex justify-end"
                 >
                     <Button
                         type="button"
                         variant="subtle"
-                        size="sm"
+                        size="xs"
                         :text="__('Today')"
                         :disabled="disabled || readOnly"
                         @click="selectToday"

From a500beb24f120b57975dc6e3ccdf9ff35ca01774 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 16:19:37 +0100
Subject: [PATCH 03/13] Add an "apply button" to replace "today" one clicked so
 you can use "today" to orient yourself, and then use "apply" to escape the
 calendar easily

---
 .../components/ui/DatePicker/DatePicker.vue   | 62 +++++++++++++++---
 .../ui/DateRangePicker/DateRangePicker.vue    | 65 +++++++++++++++++--
 2 files changed, 112 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index cf6c177509..a811ba5c30 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { config } from '@api';
-import { computed } from 'vue';
-import { getLocalTimeZone, now } from '@internationalized/date';
+import { computed, nextTick, ref } from 'vue';
+import { getLocalTimeZone, now, toCalendarDate } from '@internationalized/date';
 import {
     DatePickerAnchor,
     DatePickerContent,
@@ -87,6 +87,9 @@ const inputEvents = computed(() => ({
     },
 }));
 
+/** Synced with DatePickerRoot so we can re-open after "Today" despite close-on-select. */
+const pickerOpen = ref(false);
+
 const calendarEvents = computed(() => ({
     'update:model-value': (event) => {
         if (props.granularity === 'day') {
@@ -100,17 +103,57 @@ const calendarEvents = computed(() => ({
     },
 }));
 
-const selectToday = () => {
-    if (props.disabled || props.readOnly) {
-        return;
+const isTodaySelected = computed(() => {
+    const mv = props.modelValue;
+    if (mv == null || typeof mv !== 'object') {
+        return false;
     }
+    try {
+        const todayCal = toCalendarDate(now(getLocalTimeZone()));
+        const selectedCal = toCalendarDate(mv);
+        return (
+            selectedCal.year === todayCal.year &&
+            selectedCal.month === todayCal.month &&
+            selectedCal.day === todayCal.day
+        );
+    } catch {
+        return false;
+    }
+});
 
+const todayShortcutLabel = computed(() => {
+    if (props.inline) {
+        return __('Today');
+    }
+    return isTodaySelected.value ? __('Apply') : __('Today');
+});
+
+const emitTodayValue = () => {
     let value = now(getLocalTimeZone()).set({ millisecond: 0 });
     if (props.granularity === 'day') {
         value = value.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
     }
 
     emit('update:modelValue', value);
+
+    if (!props.inline) {
+        nextTick(() => {
+            pickerOpen.value = true;
+        });
+    }
+};
+
+const onTodayShortcutClick = () => {
+    if (props.disabled || props.readOnly) {
+        return;
+    }
+    if (isTodaySelected.value) {
+        if (!props.inline) {
+            pickerOpen.value = false;
+        }
+        return;
+    }
+    emitTodayValue();
 };
 
 const timeZoneName = computed(() => props.modelValue?.timeZone ?? null);
@@ -167,6 +210,7 @@ const getInputLabel = (part) => {
             :aria-label="__('Date picker')"
             :aria-required="required"
             close-on-select
+            v-model:open="pickerOpen"
         >
             <DatePickerField v-slot="{ segments }" class="w-full">
                 <DatePickerAnchor as-child>
@@ -254,9 +298,9 @@ const getInputLabel = (part) => {
                             type="button"
                             variant="subtle"
                             size="xs"
-                            :text="__('Today')"
+                            :text="todayShortcutLabel"
                             :disabled="disabled || readOnly"
-                            @click="selectToday"
+                            @click="onTodayShortcutClick"
                         />
                     </div>
                 </Card>
@@ -271,9 +315,9 @@ const getInputLabel = (part) => {
                         type="button"
                         variant="subtle"
                         size="xs"
-                        :text="__('Today')"
+                        :text="todayShortcutLabel"
                         :disabled="disabled || readOnly"
-                        @click="selectToday"
+                        @click="onTodayShortcutClick"
                     />
                 </div>
             </Card>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index fafb9472a3..b37a45e70f 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { config } from '@api';
-import { computed } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 import {
     DateRangePickerCalendar,
     DateRangePickerCell,
@@ -26,7 +26,7 @@ import Calendar from '../Calendar/Calendar.vue';
 import Icon from '../Icon/Icon.vue';
 import Text from '../Text.vue';
 import TimezoneHoverCard from '../TimezoneHoverCard.vue';
-import { getLocalTimeZone, now, parseAbsoluteToLocal } from '@internationalized/date';
+import { getLocalTimeZone, now, parseAbsoluteToLocal, toCalendarDate } from '@internationalized/date';
 import { getAdditionalTimezones } from '../DatePicker/util.js';
 
 const emit = defineEmits(['update:modelValue']);
@@ -77,6 +77,9 @@ const calendarBindings = computed(() => ({
 // rather than just a day).
 const placeholder = parseAbsoluteToLocal(new Date().toISOString());
 
+/** Synced with DateRangePickerRoot so we can re-open after "Today" despite close-on-select. */
+const pickerOpen = ref(false);
+
 const calendarEvents = computed(() => ({
     'update:model-value': (event) => {
         if (props.granularity === 'day') {
@@ -115,6 +118,55 @@ const selectToday = () => {
     }
 
     emit('update:modelValue', { start, end });
+
+    if (!props.inline) {
+        nextTick(() => {
+            pickerOpen.value = true;
+        });
+    }
+};
+
+const isTodayRangeSelected = computed(() => {
+    const mv = props.modelValue;
+    if (!mv?.start || !mv?.end) {
+        return false;
+    }
+    try {
+        const todayCal = toCalendarDate(now(getLocalTimeZone()));
+        const startCal = toCalendarDate(mv.start);
+        const endCal = toCalendarDate(mv.end);
+        const singleDay =
+            startCal.year === endCal.year &&
+            startCal.month === endCal.month &&
+            startCal.day === endCal.day;
+        const isToday =
+            startCal.year === todayCal.year &&
+            startCal.month === todayCal.month &&
+            startCal.day === todayCal.day;
+        return singleDay && isToday;
+    } catch {
+        return false;
+    }
+});
+
+const todayShortcutLabel = computed(() => {
+    if (props.inline) {
+        return __('Today');
+    }
+    return isTodayRangeSelected.value ? __('Apply') : __('Today');
+});
+
+const onTodayShortcutClick = () => {
+    if (props.disabled || props.readOnly) {
+        return;
+    }
+    if (isTodayRangeSelected.value) {
+        if (!props.inline) {
+            pickerOpen.value = false;
+        }
+        return;
+    }
+    selectToday();
 };
 
 const timeZoneName = computed(() => props.modelValue?.start?.timeZone ?? null);
@@ -148,6 +200,7 @@ const hoverCardDate = computed(() => {
             hide-time-zone
             :placeholder="placeholder"
             close-on-select
+            v-model:open="pickerOpen"
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div
@@ -226,9 +279,9 @@ const hoverCardDate = computed(() => {
                             type="button"
                             variant="subtle"
                             size="sm"
-                            :text="__('Today')"
+                            :text="todayShortcutLabel"
                             :disabled="disabled || readOnly"
-                            @click="selectToday"
+                            @click="onTodayShortcutClick"
                         />
                     </div>
                 </Card>
@@ -243,9 +296,9 @@ const hoverCardDate = computed(() => {
                         type="button"
                         variant="subtle"
                         size="sm"
-                        :text="__('Today')"
+                        :text="todayShortcutLabel"
                         :disabled="disabled || readOnly"
-                        @click="selectToday"
+                        @click="onTodayShortcutClick"
                     />
                 </div>
             </Card>

From 13a8b65fd2cd990ade078c33c213a1de15ff3355 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 16:26:42 +0100
Subject: [PATCH 04/13] Compress button a bit

---
 resources/js/components/ui/DatePicker/DatePicker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index a811ba5c30..34e5406022 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -298,6 +298,7 @@ const getInputLabel = (part) => {
                             type="button"
                             variant="subtle"
                             size="xs"
+                            class="h-4"
                             :text="todayShortcutLabel"
                             :disabled="disabled || readOnly"
                             @click="onTodayShortcutClick"

From 069efb8e256c83ef5326f3fa4ad657c8f334f1dd Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 16:52:02 +0100
Subject: [PATCH 05/13] Date field - improve alignment of inline calendar

---
 .../js/components/ui/Calendar/Calendar.vue     | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Calendar/Calendar.vue b/resources/js/components/ui/Calendar/Calendar.vue
index 56785b5877..341b60f2c3 100644
--- a/resources/js/components/ui/Calendar/Calendar.vue
+++ b/resources/js/components/ui/Calendar/Calendar.vue
@@ -74,6 +74,20 @@ const gridStyle = computed(() => {
         'grid-template-rows': 'auto'
     };
 });
+
+/** Popover uses slight negative inset to align with card; inline skips that inside padded layouts. */
+const calendarHeaderClass = computed(() =>
+    props.inline
+        ? 'flex items-center justify-between pb-3.5 ms-1 -me-1.5 -mt-1'
+        : 'flex items-center justify-between ps-3 pe-1 pb-3.5 -mt-1',
+);
+
+/** Month grid wrapper: popover matches narrow card; inline allows shrink in tight form layouts. */
+const calendarGridClass = computed(() =>
+    props.inline
+        ? 'w-full border-collapse space-y-1 select-none -ms-2'
+        : 'w-full border-collapse space-y-1 select-none',
+);
 </script>
 
 <template>
@@ -88,7 +102,7 @@ const gridStyle = computed(() => {
         :number-of-months="numberOfMonths"
         @update:model-value="emit('update:modelValue', $event)"
     >
-        <Component :is="components.CalendarHeader" class="flex items-center justify-between ps-3 pe-1 pb-3.5 -mt-1">
+        <Component :is="components.CalendarHeader" :class="calendarHeaderClass">
             <Component :is="components.CalendarHeading" class="text-sm font-medium text-gray-925 dark:text-white" />
             <div>
                 <Component
@@ -111,7 +125,7 @@ const gridStyle = computed(() => {
                 :is="components.CalendarGrid"
                 v-for="month in grid"
                 :key="month.value.toString()"
-                class="w-full border-collapse space-y-1 select-none"
+                :class="calendarGridClass"
             >
                 <Component :is="components.CalendarGridHead">
                     <ui-badge class="mb-2" v-if="numberOfMonths > 1">

From 03c21cbc4d74f219b79be7d681516cff55ba17e1 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 17:03:19 +0100
Subject: [PATCH 06/13] Date field - improve alignment of calendar

---
 resources/js/components/ui/Calendar/Calendar.vue     | 2 +-
 resources/js/components/ui/DatePicker/DatePicker.vue | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/Calendar/Calendar.vue b/resources/js/components/ui/Calendar/Calendar.vue
index 341b60f2c3..469825c140 100644
--- a/resources/js/components/ui/Calendar/Calendar.vue
+++ b/resources/js/components/ui/Calendar/Calendar.vue
@@ -79,7 +79,7 @@ const gridStyle = computed(() => {
 const calendarHeaderClass = computed(() =>
     props.inline
         ? 'flex items-center justify-between pb-3.5 ms-1 -me-1.5 -mt-1'
-        : 'flex items-center justify-between ps-3 pe-1 pb-3.5 -mt-1',
+        : 'flex items-center justify-between ps-3.5 pe-1 pb-3.5 -mt-1.5',
 );
 
 /** Month grid wrapper: popover matches narrow card; inline allows shrink in tight form layouts. */
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 34e5406022..a02177aba8 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -297,8 +297,8 @@ const getInputLabel = (part) => {
                         <Button
                             type="button"
                             variant="subtle"
-                            size="xs"
-                            class="h-4"
+                            size="2xs"
+                            class="me-1"
                             :text="todayShortcutLabel"
                             :disabled="disabled || readOnly"
                             @click="onTodayShortcutClick"
@@ -315,7 +315,8 @@ const getInputLabel = (part) => {
                     <Button
                         type="button"
                         variant="subtle"
-                        size="xs"
+                        size="2xs"
+                        class="-me-1"
                         :text="todayShortcutLabel"
                         :disabled="disabled || readOnly"
                         @click="onTodayShortcutClick"

From bb9af2c8c5a22fec5456b1f71bfdb016736c4cc8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 17:27:57 +0100
Subject: [PATCH 07/13] Apply changes to Date Range picker too

---
 .../ui/DateRangePicker/DateRangePicker.vue    | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index b37a45e70f..72e97e476a 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -55,6 +55,7 @@ const calendarBindings = computed(() => ({
     modelValue: props.modelValue ?? [],
     min: props.min,
     max: props.max,
+    inline: props.inline,
     components: {
         Root: DateRangePickerCalendar,
         Header: DateRangePickerHeader,
@@ -104,11 +105,7 @@ const calendarEvents = computed(() => ({
     },
 }));
 
-const selectToday = () => {
-    if (props.disabled || props.readOnly) {
-        return;
-    }
-
+const emitTodayValue = () => {
     const tz = getLocalTimeZone();
     let start = now(tz).set({ millisecond: 0 });
     let end = now(tz).set({ millisecond: 0 });
@@ -166,7 +163,7 @@ const onTodayShortcutClick = () => {
         }
         return;
     }
-    selectToday();
+    emitTodayValue();
 };
 
 const timeZoneName = computed(() => props.modelValue?.start?.timeZone ?? null);
@@ -200,6 +197,9 @@ const hoverCardDate = computed(() => {
             hide-time-zone
             :placeholder="placeholder"
             close-on-select
+            role="group"
+            :aria-label="__('Date range picker')"
+            :aria-required="required"
             v-model:open="pickerOpen"
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">
@@ -259,7 +259,16 @@ const hoverCardDate = computed(() => {
                     >
                         <Text class="text-gray-600 dark:text-gray-400 me-1" size="xs" :text="timeZoneLabel" />
                     </TimezoneHoverCard>
-                    <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
+                    <Button
+                        v-if="clearable && !readOnly"
+                        @click="emit('update:modelValue', null)"
+                        variant="subtle"
+                        size="sm"
+                        icon="x"
+                        class="-my-1.25 -me-2"
+                        :disabled="disabled"
+                        v-tooltip="__('Clear date')"
+                    />
                 </div>
             </DateRangePickerField>
 
@@ -273,12 +282,13 @@ const hoverCardDate = computed(() => {
                 <Card class="w-[20rem]">
                     <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
                     <div
-                        class="flex justify-end border-t border-gray-200 px-3 py-2 dark:border-gray-700"
+                        class="flex justify-end"
                     >
                         <Button
                             type="button"
                             variant="subtle"
-                            size="sm"
+                            size="2xs"
+                            class="me-1"
                             :text="todayShortcutLabel"
                             :disabled="disabled || readOnly"
                             @click="onTodayShortcutClick"
@@ -290,12 +300,13 @@ const hoverCardDate = computed(() => {
             <Card v-if="inline" class="mt-2">
                 <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
                 <div
-                    class="flex justify-end border-t border-gray-200 px-3 py-2 dark:border-gray-700"
+                    class="flex justify-end"
                 >
                     <Button
                         type="button"
                         variant="subtle"
-                        size="sm"
+                        size="2xs"
+                        class="-me-1"
                         :text="todayShortcutLabel"
                         :disabled="disabled || readOnly"
                         @click="onTodayShortcutClick"

From 29e2807bff2251f90762ba8c1b58ccbf3a8d4c31 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 11 May 2026 17:53:41 +0100
Subject: [PATCH 08/13] Add a behavior the for the date range picker - when you
 click today > select, today's date becomes the first selection

---
 .../ui/DateRangePicker/DateRangePicker.vue    | 61 +++++++++++++++++--
 1 file changed, 55 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 72e97e476a..68e0652955 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { config } from '@api';
-import { computed, nextTick, ref } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import {
     DateRangePickerCalendar,
     DateRangePickerCell,
@@ -81,13 +81,30 @@ const placeholder = parseAbsoluteToLocal(new Date().toISOString());
 /** Synced with DateRangePickerRoot so we can re-open after "Today" despite close-on-select. */
 const pickerOpen = ref(false);
 
+/** After "Today" shortcut, label shows "Select" until the range changes or the popover closes. */
+const shortcutPrimedForSelect = ref(false);
+
+/**
+ * After "Select", keep start+end as the same calendar day (today) but set Reka `fixed-date="start"`.
+ * Reka's changeDate() only updates `end` on the next cell click when *both* endpoints exist; if `end`
+ * is cleared, a different code path runs that requires `highlightedRange` and often never completes.
+ */
+const fixRangeStartForNextPick = ref(false);
+
+const rangePickerFixedDate = computed(() => (fixRangeStartForNextPick.value ? 'start' : undefined));
+
 const calendarEvents = computed(() => ({
     'update:model-value': (event) => {
         if (props.granularity === 'day') {
 
             // Avoid fatal error `Cannot set properties of undefined (setting 'hour')`
             if (event.end == null) {
-              return
+                // Range mid-selection: parent v-model is not updated yet, so clear the
+                // "Select" primed state here or the label would stay wrong.
+                if (shortcutPrimedForSelect.value) {
+                    shortcutPrimedForSelect.value = false;
+                }
+                return;
             }
 
             event.start.hour = 0;
@@ -106,6 +123,8 @@ const calendarEvents = computed(() => ({
 }));
 
 const emitTodayValue = () => {
+    fixRangeStartForNextPick.value = false;
+
     const tz = getLocalTimeZone();
     let start = now(tz).set({ millisecond: 0 });
     let end = now(tz).set({ millisecond: 0 });
@@ -115,6 +134,7 @@ const emitTodayValue = () => {
     }
 
     emit('update:modelValue', { start, end });
+    shortcutPrimedForSelect.value = true;
 
     if (!props.inline) {
         nextTick(() => {
@@ -146,17 +166,45 @@ const isTodayRangeSelected = computed(() => {
     }
 });
 
-const todayShortcutLabel = computed(() => {
-    if (props.inline) {
-        return __('Today');
+const todayShortcutLabel = computed(() =>
+    shortcutPrimedForSelect.value && isTodayRangeSelected.value ? __('Select') : __('Today'),
+);
+
+watch(
+    () => props.modelValue,
+    () => {
+        if (shortcutPrimedForSelect.value && !isTodayRangeSelected.value) {
+            shortcutPrimedForSelect.value = false;
+        }
+        if (fixRangeStartForNextPick.value && !isTodayRangeSelected.value) {
+            fixRangeStartForNextPick.value = false;
+        }
+    },
+    { deep: true },
+);
+
+watch(pickerOpen, (open) => {
+    if (!props.inline && !open) {
+        shortcutPrimedForSelect.value = false;
+        fixRangeStartForNextPick.value = false;
     }
-    return isTodayRangeSelected.value ? __('Apply') : __('Today');
 });
 
 const onTodayShortcutClick = () => {
     if (props.disabled || props.readOnly) {
         return;
     }
+    /** Same calendar day for start+end, but `fixed-date="start"` so the next click only moves `end`. */
+    if (shortcutPrimedForSelect.value && isTodayRangeSelected.value) {
+        fixRangeStartForNextPick.value = true;
+        shortcutPrimedForSelect.value = false;
+        if (!props.inline) {
+            nextTick(() => {
+                pickerOpen.value = true;
+            });
+        }
+        return;
+    }
     if (isTodayRangeSelected.value) {
         if (!props.inline) {
             pickerOpen.value = false;
@@ -201,6 +249,7 @@ const hoverCardDate = computed(() => {
             :aria-label="__('Date range picker')"
             :aria-required="required"
             v-model:open="pickerOpen"
+            :fixed-date="rangePickerFixedDate"
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div

From ca72db02340405cb7b7e95c565c6bdbb60a66ca8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 09:50:26 +0100
Subject: [PATCH 09/13] Fix "select" behaviour when the date is _not_ inline

---
 .../components/ui/DatePicker/DatePicker.vue   | 12 +++----
 .../ui/DateRangePicker/DateRangePicker.vue    | 36 +++++++++++++++----
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index a02177aba8..a7828805da 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -121,12 +121,9 @@ const isTodaySelected = computed(() => {
     }
 });
 
-const todayShortcutLabel = computed(() => {
-    if (props.inline) {
-        return __('Today');
-    }
-    return isTodaySelected.value ? __('Apply') : __('Today');
-});
+const todayShortcutLabel = computed(() =>
+    isTodaySelected.value ? __('Apply') : __('Today'),
+);
 
 const emitTodayValue = () => {
     let value = now(getLocalTimeZone()).set({ millisecond: 0 });
@@ -150,6 +147,9 @@ const onTodayShortcutClick = () => {
     if (isTodaySelected.value) {
         if (!props.inline) {
             pickerOpen.value = false;
+        } else {
+            // Inline has no popover to dismiss; re-apply today's value so "Apply" does something useful.
+            emitTodayValue();
         }
         return;
     }
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 68e0652955..adbe39fb66 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { config } from '@api';
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
 import {
     DateRangePickerCalendar,
     DateRangePickerCell,
@@ -84,10 +84,18 @@ const pickerOpen = ref(false);
 /** After "Today" shortcut, label shows "Select" until the range changes or the popover closes. */
 const shortcutPrimedForSelect = ref(false);
 
+/**
+ * Reka closes the popover when start+end are both set (`close-on-select`). Our "Today" emit does that,
+ * so the popover blips closed and `watch(pickerOpen)` would clear `shortcutPrimedForSelect` before
+ * we re-open in `nextTick`. Skip clearing for that one automatic close.
+ */
+const ignoreNextPickerCloseForShortcut = ref(false);
+
 /**
  * After "Select", keep start+end as the same calendar day (today) but set Reka `fixed-date="start"`.
  * Reka's changeDate() only updates `end` on the next cell click when *both* endpoints exist; if `end`
  * is cleared, a different code path runs that requires `highlightedRange` and often never completes.
+ * (reka-ui: `RangeCalendarCellTrigger.vue` → `changeDate`.)
  */
 const fixRangeStartForNextPick = ref(false);
 
@@ -104,6 +112,9 @@ const calendarEvents = computed(() => ({
                 if (shortcutPrimedForSelect.value) {
                     shortcutPrimedForSelect.value = false;
                 }
+                if (fixRangeStartForNextPick.value) {
+                    fixRangeStartForNextPick.value = false;
+                }
                 return;
             }
 
@@ -133,12 +144,19 @@ const emitTodayValue = () => {
         end = end.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
     }
 
+    if (!props.inline) {
+        ignoreNextPickerCloseForShortcut.value = true;
+    }
+
     emit('update:modelValue', { start, end });
     shortcutPrimedForSelect.value = true;
 
     if (!props.inline) {
         nextTick(() => {
             pickerOpen.value = true;
+            nextTick(() => {
+                ignoreNextPickerCloseForShortcut.value = false;
+            });
         });
     }
 };
@@ -185,11 +203,20 @@ watch(
 
 watch(pickerOpen, (open) => {
     if (!props.inline && !open) {
+        if (ignoreNextPickerCloseForShortcut.value) {
+            return;
+        }
         shortcutPrimedForSelect.value = false;
         fixRangeStartForNextPick.value = false;
     }
 });
 
+onUnmounted(() => {
+    shortcutPrimedForSelect.value = false;
+    fixRangeStartForNextPick.value = false;
+    ignoreNextPickerCloseForShortcut.value = false;
+});
+
 const onTodayShortcutClick = () => {
     if (props.disabled || props.readOnly) {
         return;
@@ -205,12 +232,7 @@ const onTodayShortcutClick = () => {
         }
         return;
     }
-    if (isTodayRangeSelected.value) {
-        if (!props.inline) {
-            pickerOpen.value = false;
-        }
-        return;
-    }
+    /** Always apply today (clears fixed-date / in-progress calendar state). Same as first "Today". */
     emitTodayValue();
 };
 

From 46ca8f0e2ec182da88b1a1a6a6b9ec90738f916b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 09:58:21 +0100
Subject: [PATCH 10/13] Fix clicking "today" when the date is not inline, so it
 forwards the date to the correct month

---
 .../js/components/ui/DateRangePicker/DateRangePicker.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index adbe39fb66..a31c6aa4b4 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -26,7 +26,7 @@ import Calendar from '../Calendar/Calendar.vue';
 import Icon from '../Icon/Icon.vue';
 import Text from '../Text.vue';
 import TimezoneHoverCard from '../TimezoneHoverCard.vue';
-import { getLocalTimeZone, now, parseAbsoluteToLocal, toCalendarDate } from '@internationalized/date';
+import { getLocalTimeZone, now, toCalendarDate } from '@internationalized/date';
 import { getAdditionalTimezones } from '../DatePicker/util.js';
 
 const emit = defineEmits(['update:modelValue']);
@@ -72,12 +72,6 @@ const calendarBindings = computed(() => ({
     },
 }));
 
-// The placeholder defines the month to show when there's no value. Additionally,
-// by setting it to an absolute value, it ensures that the emitted event value
-// will be the appropriate format (e.g. a full date with time with timezone,
-// rather than just a day).
-const placeholder = parseAbsoluteToLocal(new Date().toISOString());
-
 /** Synced with DateRangePickerRoot so we can re-open after "Today" despite close-on-select. */
 const pickerOpen = ref(false);
 
@@ -265,7 +259,6 @@ const hoverCardDate = computed(() => {
             v-bind="$attrs"
             prevent-deselect
             hide-time-zone
-            :placeholder="placeholder"
             close-on-select
             role="group"
             :aria-label="__('Date range picker')"

From fc3d36c70fd15e9ad10bf30ff86e024e0f51cc35 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 10:21:04 +0100
Subject: [PATCH 11/13] Apply should still show when there is a date _range_

---
 resources/js/components/ui/DatePicker/DatePicker.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index a7828805da..54d5db8b34 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -121,9 +121,12 @@ const isTodaySelected = computed(() => {
     }
 });
 
-const todayShortcutLabel = computed(() =>
-    isTodaySelected.value ? __('Apply') : __('Today'),
-);
+const todayShortcutLabel = computed(() => {
+    if (props.inline) {
+        return __('Today');
+    }
+    return isTodaySelected.value ? __('Apply') : __('Today');
+});
 
 const emitTodayValue = () => {
     let value = now(getLocalTimeZone()).set({ millisecond: 0 });

From ca0945ca28cbfc4d58cd1a634870197efe931125 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 10:52:16 +0100
Subject: [PATCH 12/13] For the date range picker, if you click "today", then
 _don't_ click select, but pick another day, "select" should reset to "today"

---
 .../ui/DateRangePicker/DateRangePicker.vue    | 108 ++++++++++--------
 1 file changed, 59 insertions(+), 49 deletions(-)

diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index a31c6aa4b4..08c0d00ac2 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -95,37 +95,62 @@ const fixRangeStartForNextPick = ref(false);
 
 const rangePickerFixedDate = computed(() => (fixRangeStartForNextPick.value ? 'start' : undefined));
 
-const calendarEvents = computed(() => ({
-    'update:model-value': (event) => {
-        if (props.granularity === 'day') {
-
-            // Avoid fatal error `Cannot set properties of undefined (setting 'hour')`
-            if (event.end == null) {
-                // Range mid-selection: parent v-model is not updated yet, so clear the
-                // "Select" primed state here or the label would stay wrong.
-                if (shortcutPrimedForSelect.value) {
-                    shortcutPrimedForSelect.value = false;
-                }
-                if (fixRangeStartForNextPick.value) {
-                    fixRangeStartForNextPick.value = false;
-                }
-                return;
-            }
-
-            event.start.hour = 0;
-            event.start.minute = 0;
-            event.start.second = 0;
-            event.start.millisecond = 0;
-
-            event.end.hour = 0;
-            event.end.minute = 0;
-            event.end.second = 0;
-            event.end.millisecond = 0;
+/** Same calendar day for start/end, and that day is today (footer "Select" / today-shortcut state). */
+function isTodaySingleDayRange(start, end) {
+    if (!start || !end) {
+        return false;
+    }
+    try {
+        const todayCal = toCalendarDate(now(getLocalTimeZone()));
+        const startCal = toCalendarDate(start);
+        const endCal = toCalendarDate(end);
+        const singleDay =
+            startCal.year === endCal.year &&
+            startCal.month === endCal.month &&
+            startCal.day === endCal.day;
+        const isToday =
+            startCal.year === todayCal.year &&
+            startCal.month === todayCal.month &&
+            startCal.day === todayCal.day;
+        return singleDay && isToday;
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Range updates come from DateRangePickerRoot — not from Calendar's emit (DateRangePickerCalendar
+ * handles RangeCalendar internally). Footer priming + day normalization must run here.
+ */
+function onPickerModelUpdate(event) {
+    // Partial range (any granularity): reset footer — inline pickers often omit `granularity="day"`.
+    if (event.end == null) {
+        if (shortcutPrimedForSelect.value && !fixRangeStartForNextPick.value) {
+            shortcutPrimedForSelect.value = false;
         }
+        emit('update:modelValue', event);
+        return;
+    }
 
-        emit('update:modelValue', event)
-    },
-}));
+    if (props.granularity === 'day') {
+        event.start.hour = 0;
+        event.start.minute = 0;
+        event.start.second = 0;
+        event.start.millisecond = 0;
+
+        event.end.hour = 0;
+        event.end.minute = 0;
+        event.end.second = 0;
+        event.end.millisecond = 0;
+    }
+
+    if (event.start && !isTodaySingleDayRange(event.start, event.end)) {
+        shortcutPrimedForSelect.value = false;
+        fixRangeStartForNextPick.value = false;
+    }
+
+    emit('update:modelValue', event);
+}
 
 const emitTodayValue = () => {
     fixRangeStartForNextPick.value = false;
@@ -160,22 +185,7 @@ const isTodayRangeSelected = computed(() => {
     if (!mv?.start || !mv?.end) {
         return false;
     }
-    try {
-        const todayCal = toCalendarDate(now(getLocalTimeZone()));
-        const startCal = toCalendarDate(mv.start);
-        const endCal = toCalendarDate(mv.end);
-        const singleDay =
-            startCal.year === endCal.year &&
-            startCal.month === endCal.month &&
-            startCal.day === endCal.day;
-        const isToday =
-            startCal.year === todayCal.year &&
-            startCal.month === todayCal.month &&
-            startCal.day === todayCal.day;
-        return singleDay && isToday;
-    } catch {
-        return false;
-    }
+    return isTodaySingleDayRange(mv.start, mv.end);
 });
 
 const todayShortcutLabel = computed(() =>
@@ -255,11 +265,11 @@ const hoverCardDate = computed(() => {
             :granularity="granularity"
             :locale="$date.locale"
             :disabled="disabled || readOnly"
-            @update:model-value="emit('update:modelValue', $event)"
+            @update:model-value="onPickerModelUpdate"
             v-bind="$attrs"
             prevent-deselect
             hide-time-zone
-            close-on-select
+            :close-on-select="!inline"
             role="group"
             :aria-label="__('Date range picker')"
             :aria-required="required"
@@ -344,7 +354,7 @@ const hoverCardDate = computed(() => {
                 class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade will-change-[transform,opacity]"
             >
                 <Card class="w-[20rem]">
-                    <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                    <Calendar v-bind="calendarBindings" />
                     <div
                         class="flex justify-end"
                     >
@@ -362,7 +372,7 @@ const hoverCardDate = computed(() => {
             </DateRangePickerContent>
 
             <Card v-if="inline" class="mt-2">
-                <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                <Calendar v-bind="calendarBindings" />
                 <div
                     class="flex justify-end"
                 >

From 139687f03e77455d9fe6093100662b52a5aee5a3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 11:04:37 +0100
Subject: [PATCH 13/13] If there is an "earliest date" or "latest date" set
 before today then you should not be able to select today

---
 .../components/ui/DatePicker/DatePicker.vue   | 45 ++++++++++++++--
 .../ui/DateRangePicker/DateRangePicker.vue    | 53 +++++++++++++++++--
 2 files changed, 90 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 54d5db8b34..28008211e7 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { config } from '@api';
 import { computed, nextTick, ref } from 'vue';
-import { getLocalTimeZone, now, toCalendarDate } from '@internationalized/date';
+import { getLocalTimeZone, now, parseAbsolute, toCalendarDate } from '@internationalized/date';
 import {
     DatePickerAnchor,
     DatePickerContent,
@@ -103,6 +103,40 @@ const calendarEvents = computed(() => ({
     },
 }));
 
+/** When `min` is later than today, "today" is outside the allowed range. */
+const isTodayBeforeMin = computed(() => {
+    if (props.min == null) {
+        return false;
+    }
+    try {
+        const minValue = typeof props.min === 'string' ? parseAbsolute(props.min) : props.min;
+        const todayCal = toCalendarDate(now(getLocalTimeZone()));
+        const minCal = toCalendarDate(minValue);
+        return todayCal.compare(minCal) < 0;
+    } catch {
+        return false;
+    }
+});
+
+/** When `max` is earlier than today, "today" is outside the allowed range. */
+const isTodayAfterMax = computed(() => {
+    if (props.max == null) {
+        return false;
+    }
+    try {
+        const maxValue = typeof props.max === 'string' ? parseAbsolute(props.max) : props.max;
+        const todayCal = toCalendarDate(now(getLocalTimeZone()));
+        const maxCal = toCalendarDate(maxValue);
+        return todayCal.compare(maxCal) > 0;
+    } catch {
+        return false;
+    }
+});
+
+const todayShortcutDisabled = computed(
+    () => props.disabled || props.readOnly || isTodayBeforeMin.value || isTodayAfterMax.value,
+);
+
 const isTodaySelected = computed(() => {
     const mv = props.modelValue;
     if (mv == null || typeof mv !== 'object') {
@@ -129,6 +163,9 @@ const todayShortcutLabel = computed(() => {
 });
 
 const emitTodayValue = () => {
+    if (todayShortcutDisabled.value) {
+        return;
+    }
     let value = now(getLocalTimeZone()).set({ millisecond: 0 });
     if (props.granularity === 'day') {
         value = value.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
@@ -144,7 +181,7 @@ const emitTodayValue = () => {
 };
 
 const onTodayShortcutClick = () => {
-    if (props.disabled || props.readOnly) {
+    if (todayShortcutDisabled.value) {
         return;
     }
     if (isTodaySelected.value) {
@@ -303,7 +340,7 @@ const getInputLabel = (part) => {
                             size="2xs"
                             class="me-1"
                             :text="todayShortcutLabel"
-                            :disabled="disabled || readOnly"
+                            :disabled="todayShortcutDisabled"
                             @click="onTodayShortcutClick"
                         />
                     </div>
@@ -321,7 +358,7 @@ const getInputLabel = (part) => {
                         size="2xs"
                         class="-me-1"
                         :text="todayShortcutLabel"
-                        :disabled="disabled || readOnly"
+                        :disabled="todayShortcutDisabled"
                         @click="onTodayShortcutClick"
                     />
                 </div>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 08c0d00ac2..79ae507697 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -26,7 +26,7 @@ import Calendar from '../Calendar/Calendar.vue';
 import Icon from '../Icon/Icon.vue';
 import Text from '../Text.vue';
 import TimezoneHoverCard from '../TimezoneHoverCard.vue';
-import { getLocalTimeZone, now, toCalendarDate } from '@internationalized/date';
+import { getLocalTimeZone, now, parseAbsolute, toCalendarDate } from '@internationalized/date';
 import { getAdditionalTimezones } from '../DatePicker/util.js';
 
 const emit = defineEmits(['update:modelValue']);
@@ -95,6 +95,40 @@ const fixRangeStartForNextPick = ref(false);
 
 const rangePickerFixedDate = computed(() => (fixRangeStartForNextPick.value ? 'start' : undefined));
 
+/** When `min` is later than today, "today" is outside the allowed range. */
+const isTodayBeforeMin = computed(() => {
+    if (props.min == null) {
+        return false;
+    }
+    try {
+        const minValue = typeof props.min === 'string' ? parseAbsolute(props.min) : props.min;
+        const todayCal = toCalendarDate(now(getLocalTimeZone()));
+        const minCal = toCalendarDate(minValue);
+        return todayCal.compare(minCal) < 0;
+    } catch {
+        return false;
+    }
+});
+
+/** When `max` is earlier than today, "today" is outside the allowed range. */
+const isTodayAfterMax = computed(() => {
+    if (props.max == null) {
+        return false;
+    }
+    try {
+        const maxValue = typeof props.max === 'string' ? parseAbsolute(props.max) : props.max;
+        const todayCal = toCalendarDate(now(getLocalTimeZone()));
+        const maxCal = toCalendarDate(maxValue);
+        return todayCal.compare(maxCal) > 0;
+    } catch {
+        return false;
+    }
+});
+
+const todayShortcutDisabled = computed(
+    () => props.disabled || props.readOnly || isTodayBeforeMin.value || isTodayAfterMax.value,
+);
+
 /** Same calendar day for start/end, and that day is today (footer "Select" / today-shortcut state). */
 function isTodaySingleDayRange(start, end) {
     if (!start || !end) {
@@ -153,6 +187,10 @@ function onPickerModelUpdate(event) {
 }
 
 const emitTodayValue = () => {
+    if (todayShortcutDisabled.value) {
+        return;
+    }
+
     fixRangeStartForNextPick.value = false;
 
     const tz = getLocalTimeZone();
@@ -205,6 +243,13 @@ watch(
     { deep: true },
 );
 
+watch([isTodayBeforeMin, isTodayAfterMax], ([beforeMin, afterMax]) => {
+    if (beforeMin || afterMax) {
+        shortcutPrimedForSelect.value = false;
+        fixRangeStartForNextPick.value = false;
+    }
+});
+
 watch(pickerOpen, (open) => {
     if (!props.inline && !open) {
         if (ignoreNextPickerCloseForShortcut.value) {
@@ -222,7 +267,7 @@ onUnmounted(() => {
 });
 
 const onTodayShortcutClick = () => {
-    if (props.disabled || props.readOnly) {
+    if (todayShortcutDisabled.value) {
         return;
     }
     /** Same calendar day for start+end, but `fixed-date="start"` so the next click only moves `end`. */
@@ -364,7 +409,7 @@ const hoverCardDate = computed(() => {
                             size="2xs"
                             class="me-1"
                             :text="todayShortcutLabel"
-                            :disabled="disabled || readOnly"
+                            :disabled="todayShortcutDisabled"
                             @click="onTodayShortcutClick"
                         />
                     </div>
@@ -382,7 +427,7 @@ const hoverCardDate = computed(() => {
                         size="2xs"
                         class="-me-1"
                         :text="todayShortcutLabel"
-                        :disabled="disabled || readOnly"
+                        :disabled="todayShortcutDisabled"
                         @click="onTodayShortcutClick"
                     />
                 </div>