[6.x] Date picker today shortcut

resources/js/components/ui/Calendar/Calendar.vue

@@ -16,6 +16,7 @@ import {
 } from 'reka-ui';
 import { parseAbsolute } from '@internationalized/date';
 import Icon from '../Icon/Icon.vue';
+import CalendarToday from './CalendarToday.vue';
 
 defineOptions({ name: 'Calendar' });
 
@@ -39,6 +40,7 @@ const components = computed(() => ({
     CalendarHeading: props.components.Heading || CalendarHeading,
     CalendarPrev: props.components.Prev || CalendarPrev,
     CalendarNext: props.components.Next || CalendarNext,
+    CalendarToday: props.components.Today || CalendarToday,
     CalendarGrid: props.components.Grid || CalendarGrid,
     CalendarGridHead: props.components.GridHead || CalendarGridHead,
     CalendarGridBody: props.components.GridBody || CalendarGridBody,
@@ -74,6 +76,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,18 +104,19 @@ 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>
+            <div class="inline-flex items-center">
                 <Component
                     :is="components.CalendarPrev"
-                    class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-925"
+                    class="inline-flex size-7.5 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-925"
                 >
                     <Icon name="chevron-left" class="size-4" />
                 </Component>
+                <Component :is="components.CalendarToday" />
                 <Component
                     :is="components.CalendarNext"
-                    class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-925"
+                    class="inline-flex size-7.5 cursor-pointer items-center justify-center rounded-md hover:bg-gray-50 active:scale-90 dark:hover:bg-gray-925"
                 >
                     <Icon name="chevron-right" class="size-4" />
                 </Component>
@@ -111,7 +128,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">

resources/js/components/ui/Calendar/CalendarToday.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
+import { fromDate, getLocalTimeZone, isSameMonth, startOfMonth, toCalendarDate } from '@internationalized/date';
+import { injectCalendarRootContext, injectRangeCalendarRootContext } from 'reka-ui';
+import Icon from '../Icon/Icon.vue';
+
+defineOptions({ name: 'CalendarToday' });
+
+const calendarRoot = injectCalendarRootContext(null) ?? injectRangeCalendarRootContext(null);
+
+const today = ref(new Date());
+let timer;
+
+// Re-evaluates "today" at midnight so the disabled state doesn't go stale if the calendar stays open overnight.
+function scheduleUpdate() {
+    const now = new Date();
+    const msUntilMidnight = +new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1) - +now;
+    timer = setTimeout(() => { today.value = new Date(); scheduleUpdate(); }, msUntilMidnight);
+}
+
+onMounted(scheduleUpdate);
+onUnmounted(() => clearTimeout(timer));
+
+function currentMonth() {
+    return startOfMonth(toCalendarDate(fromDate(today.value, getLocalTimeZone())));
+}
+
+const disabled = computed(() => {
+    if (!calendarRoot) return true;
+    if (unref(calendarRoot.disabled) || unref(calendarRoot.readonly)) return true;
+    const placeholder = unref(calendarRoot.placeholder);
+    if (!placeholder) return false;
+    return isSameMonth(toCalendarDate(placeholder), currentMonth());
+});
+
+function goToToday() {
+    if (!calendarRoot || disabled.value) return;
+    calendarRoot.onPlaceholderChange(currentMonth());
+}
+</script>
+
+<template>
+    <button
+        type="button"
+        class="inline-flex size-7.5 shrink-0 cursor-pointer items-center justify-center rounded-md text-gray-925 hover:bg-gray-50 active:scale-90 disabled:pointer-events-none disabled:opacity-40 dark:text-white dark:hover:bg-gray-925"
+        :disabled="disabled"
+        :aria-label="__('This month')"
+        v-tooltip="__('This month')"
+        @click="goToToday"
+    >
+        <Icon name="calendar" class="size-3.5!" />
+    </button>
+</template>

resources/js/components/ui/DateRangePicker/DateRangePicker.vue

@@ -56,6 +56,7 @@ const calendarBindings = computed(() => ({
     modelValue: props.modelValue ?? [],
     min: props.min,
     max: props.max,
+    inline: props.inline,
     components: {
         Root: DateRangePickerCalendar,
         Header: DateRangePickerHeader,
@@ -72,11 +73,11 @@ 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());
+// Initial month when there is no value. Use defaultPlaceholder (not placeholder) so
+// the range root stays uncontrolled: month navigation can update the visible month,
+// and shared calendar UI (e.g. Today) can read that state from inject context.
+// Still an absolute local ZonedDateTime so defaults match full date/time shape.
+const defaultPlaceholder = parseAbsoluteToLocal(new Date().toISOString());
 
 const calendarEvents = computed(() => ({
     'update:model-value': (event) => {
@@ -131,7 +132,7 @@ const hoverCardDate = computed(() => {
             v-bind="$attrs"
             prevent-deselect
             hide-time-zone
-            :placeholder="placeholder"
+            :default-placeholder="defaultPlaceholder"
             close-on-select
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">