diff --git a/resources/js/components/ui/Calendar/Calendar.vue b/resources/js/components/ui/Calendar/Calendar.vue
index 56785b58777..469825c1408 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.5 pe-1 pb-3.5 -mt-1.5',
+);
+
+/** 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">
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 669158a0aa6..28008211e75 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 { computed, nextTick, ref } from 'vue';
+import { getLocalTimeZone, now, parseAbsolute, toCalendarDate } from '@internationalized/date';
 import {
     DatePickerAnchor,
     DatePickerContent,
@@ -86,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') {
@@ -99,6 +103,99 @@ 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') {
+        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 = () => {
+    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 });
+    }
+
+    emit('update:modelValue', value);
+
+    if (!props.inline) {
+        nextTick(() => {
+            pickerOpen.value = true;
+        });
+    }
+};
+
+const onTodayShortcutClick = () => {
+    if (todayShortcutDisabled.value) {
+        return;
+    }
+    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;
+    }
+    emitTodayValue();
+};
+
 const timeZoneName = computed(() => props.modelValue?.timeZone ?? null);
 
 const timeZoneLabel = computed(() => {
@@ -153,6 +250,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>
@@ -233,11 +331,37 @@ 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="2xs"
+                            class="me-1"
+                            :text="todayShortcutLabel"
+                            :disabled="todayShortcutDisabled"
+                            @click="onTodayShortcutClick"
+                        />
+                    </div>
                 </Card>
             </DatePickerContent>
 
             <Card v-if="inline" class="mt-2">
                 <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                <div
+                    class="flex justify-end"
+                >
+                    <Button
+                        type="button"
+                        variant="subtle"
+                        size="2xs"
+                        class="-me-1"
+                        :text="todayShortcutLabel"
+                        :disabled="todayShortcutDisabled"
+                        @click="onTodayShortcutClick"
+                    />
+                </div>
             </Card>
         </DatePickerRoot>
     </div>
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 6207a027a01..79ae5076975 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, onUnmounted, ref, watch } 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 { parseAbsoluteToLocal } from '@internationalized/date';
+import { getLocalTimeZone, now, parseAbsolute, toCalendarDate } from '@internationalized/date';
 import { getAdditionalTimezones } from '../DatePicker/util.js';
 
 const emit = defineEmits(['update:modelValue']);
@@ -55,6 +55,7 @@ const calendarBindings = computed(() => ({
     modelValue: props.modelValue ?? [],
     min: props.min,
     max: props.max,
+    inline: props.inline,
     components: {
         Root: DateRangePickerCalendar,
         Header: DateRangePickerHeader,
@@ -71,35 +72,218 @@ 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());
-
-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
-            }
-
-            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;
+/** 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);
+
+/**
+ * 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);
+
+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) {
+        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;
+    }
+
+    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 = () => {
+    if (todayShortcutDisabled.value) {
+        return;
+    }
+
+    fixRangeStartForNextPick.value = false;
+
+    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 });
+    }
+
+    if (!props.inline) {
+        ignoreNextPickerCloseForShortcut.value = true;
+    }
+
+    emit('update:modelValue', { start, end });
+    shortcutPrimedForSelect.value = true;
 
-        emit('update:modelValue', event)
+    if (!props.inline) {
+        nextTick(() => {
+            pickerOpen.value = true;
+            nextTick(() => {
+                ignoreNextPickerCloseForShortcut.value = false;
+            });
+        });
+    }
+};
+
+const isTodayRangeSelected = computed(() => {
+    const mv = props.modelValue;
+    if (!mv?.start || !mv?.end) {
+        return false;
+    }
+    return isTodaySingleDayRange(mv.start, mv.end);
+});
+
+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([isTodayBeforeMin, isTodayAfterMax], ([beforeMin, afterMax]) => {
+    if (beforeMin || afterMax) {
+        shortcutPrimedForSelect.value = false;
+        fixRangeStartForNextPick.value = false;
+    }
+});
+
+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 (todayShortcutDisabled.value) {
+        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;
+    }
+    /** Always apply today (clears fixed-date / in-progress calendar state). Same as first "Today". */
+    emitTodayValue();
+};
 
 const timeZoneName = computed(() => props.modelValue?.start?.timeZone ?? null);
 
@@ -126,12 +310,16 @@ 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
-            :placeholder="placeholder"
-            close-on-select
+            :close-on-select="!inline"
+            role="group"
+            :aria-label="__('Date range picker')"
+            :aria-required="required"
+            v-model:open="pickerOpen"
+            :fixed-date="rangePickerFixedDate"
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div
@@ -190,7 +378,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>
 
@@ -202,12 +399,38 @@ 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"
+                    >
+                        <Button
+                            type="button"
+                            variant="subtle"
+                            size="2xs"
+                            class="me-1"
+                            :text="todayShortcutLabel"
+                            :disabled="todayShortcutDisabled"
+                            @click="onTodayShortcutClick"
+                        />
+                    </div>
                 </Card>
             </DateRangePickerContent>
 
             <Card v-if="inline" class="mt-2">
-                <Calendar v-bind="calendarBindings" v-on="calendarEvents" />
+                <Calendar v-bind="calendarBindings" />
+                <div
+                    class="flex justify-end"
+                >
+                    <Button
+                        type="button"
+                        variant="subtle"
+                        size="2xs"
+                        class="-me-1"
+                        :text="todayShortcutLabel"
+                        :disabled="todayShortcutDisabled"
+                        @click="onTodayShortcutClick"
+                    />
+                </div>
             </Card>
         </DateRangePickerRoot>
     </div>