docs(calendar): improve date range picker example

docs/app/components/content/examples/calendar/CalendarDateRangePickerExample.vue

@@ -1,35 +1,69 @@
 <script setup lang="ts">
-import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
 
-const df = new DateFormatter('en-US', {
-  dateStyle: 'medium'
-})
+const df = new DateFormatter('en-US', { dateStyle: 'medium' })
+const tz = getLocalTimeZone()
+
+const ranges = [
+  { label: 'Last 7 days', days: 7 },
+  { label: 'Last 14 days', days: 14 },
+  { label: 'Last 30 days', days: 30 },
+  { label: 'Last 3 months', months: 3 },
+  { label: 'Last 6 months', months: 6 },
+  { label: 'Last year', years: 1 }
+]
 
 const modelValue = shallowRef({
-  start: new CalendarDate(2022, 1, 20),
-  end: new CalendarDate(2022, 2, 10)
+  start: today(tz).subtract({ days: 14 }),
+  end: today(tz)
+})
+
+const label = computed(() => {
+  const { start, end } = modelValue.value
+  if (!start) return 'Pick a date'
+  if (!end) return df.format(start.toDate(tz))
+  return `${df.format(start.toDate(tz))} - ${df.format(end.toDate(tz))}`
 })
+
+function computeStart(range: typeof ranges[number]) {
+  const end = today(tz)
+  return { start: end.subtract({ days: range.days, months: range.months, years: range.years }), end }
+}
+
+function isRangeSelected(range: typeof ranges[number]) {
+  const { start, end } = computeStart(range)
+  return modelValue.value.start.compare(start) === 0 && modelValue.value.end.compare(end) === 0
+}
+
+function selectRange(range: typeof ranges[number]) {
+  modelValue.value = computeStart(range)
+}
 </script>
 
 <template>
-  <UPopover>
+  <UPopover :content="{ align: 'center' }">
     <UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
-      <template v-if="modelValue.start">
-        <template v-if="modelValue.end">
-          {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }} - {{ df.format(modelValue.end.toDate(getLocalTimeZone())) }}
-        </template>
-
-        <template v-else>
-          {{ df.format(modelValue.start.toDate(getLocalTimeZone())) }}
-        </template>
-      </template>
-      <template v-else>
-        Pick a date
-      </template>
+      {{ label }}
     </UButton>
 
     <template #content>
-      <UCalendar v-model="modelValue" class="p-2" :number-of-months="2" range />
+      <div class="flex items-stretch divide-x divide-(--ui-border)">
+        <div class="flex flex-col py-2">
+          <UButton
+            v-for="(range, index) in ranges"
+            :key="index"
+            :label="range.label"
+            color="neutral"
+            variant="ghost"
+            class="rounded-none px-4"
+            :class="[isRangeSelected(range) ? 'bg-elevated' : 'hover:bg-elevated/50']"
+            truncate
+            @click="selectRange(range)"
+          />
+        </div>
+
+        <UCalendar v-model="modelValue" class="p-2" :number-of-months="2" range />
+      </div>
     </template>
   </UPopover>
 </template>

docs/content/docs/2.components/calendar.md

@@ -287,7 +287,7 @@ name: 'calendar-date-picker-example'
 
 ### As a date range picker
 
-Use a [Button](/docs/components/button) and a [Popover](/docs/components/popover) component to create a date range picker.
+Use a [Button](/docs/components/button) and a [Popover](/docs/components/popover) component to create a date range picker with preset ranges.
 
 ::component-example
 ---