<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next'
import DayView from './day-view.vue'

const presets = [
  { label: 'Last 3 days', value: 'last3Days' },
  { label: 'Last 7 days', value: 'last7Days' },
  { label: 'Last 14 days', value: 'last14Days' },
  { label: 'Last 30 days', value: 'last30Days' },
  { label: 'Last 90 days', value: 'last90Days' },
] as const
</script>

<template>
  <DatePicker.Root open :startOfWeek="1" selectionMode="range" :numOfMonths="2">
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.Context v-slot="datePicker">
          <div>
            <div>
              <DatePicker.YearSelect />
              <DatePicker.MonthSelect />
              <button type="button" @click="datePicker.selectToday()">Today</button>
            </div>
            <div>
              <DatePicker.PrevTrigger>
                <ChevronLeftIcon />
              </DatePicker.PrevTrigger>
              <span>{{ datePicker.visibleRangeText.start }}</span>
              <DatePicker.NextTrigger>
                <ChevronRightIcon />
              </DatePicker.NextTrigger>
              <span>{{ datePicker.visibleRangeText.end }}</span>
            </div>
            <div>
              <DayView :monthOffset="0" />
              <DayView :monthOffset="1" />
            </div>
            <DatePicker.Control>
              <DatePicker.Input :index="0" />
              <span>-</span>
              <DatePicker.Input :index="1" />
              <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
            </DatePicker.Control>

            <div>
              <div v-for="preset in presets" :key="preset.value">
                <DatePicker.PresetTrigger :value="preset.value">
                  {{ preset.label }}
                </DatePicker.PresetTrigger>
              </div>
            </div>
          </div>
        </DatePicker.Context>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </DatePicker.Root>
</template>
Standalone Date Picker

Components in this Example
