Range presets

Set presets to true for the six built-in keys, or pass a list that mixes keys and custom ranges. Presets show on isDateRange and isDatePicker calendars. A date picker uses the start of each preset.

Built-in presets

today, yesterday, last7Days, last30Days, thisMonth and lastMonth. The 7 and 30 day presets include today.

<FunctionalCalendar v-model="value" is-date-range can-clear-range :presets="true" />

Choose and order presets

A list picks which presets show and in what order.

<FunctionalCalendar
  v-model="value"
  is-date-range
  :presets="['today', 'last7Days', 'thisMonth']"
/>

Custom ranges

A custom preset is { label, range }. range returns { start, end } as Date objects, and the calendar calls it each time it needs the preset.

<script setup>
const presets = [
  'today',
  'last7Days',
  'thisMonth',
  {
    label: 'Next 14 days',
    range: () => {
      const start = new Date()
      const end = new Date()
      end.setDate(end.getDate() + 13)
      return { start, end }
    },
  },
]
</script>

<template>
  <FunctionalCalendar v-model="value" is-date-range :presets="presets" />
</template>

Disabled presets

A preset is disabled when its range breaks a rule: limits, disabledDates, disabledDayNames, enabledDates, minSelDays or maxSelDays. A disabled preset stays focusable and does nothing when clicked. Here beforeToday disables every preset that reaches into the past.

<FunctionalCalendar
  v-model="value"
  is-date-range
  :presets="true"
  :disabled-dates="['beforeToday']"
/>

Presets in a modal

The presets sit in the popup. With isAutoCloseable, picking one closes it and returns focus to the input. labels.presets translates the names.

<FunctionalCalendar
  v-model="value"
  is-date-range
  is-modal
  is-auto-closeable
  :presets="true"
  :labels="{ presets: { today: 'Heute', yesterday: 'Gestern' } }"
/>

Presets on a date picker

<FunctionalCalendar v-model="value" is-date-picker :presets="['today', 'yesterday']" />