Date Range Picker

A component for selecting a range of dates.

Anatomy

<script setup lang="ts">
import {
  VcDateRangePickerRoot,
  VcDateRangePickerHeader,
  VcDateRangePickerGrid,
  VcDateRangePickerDate,
} from '@wisemen/vue-core-components'
</script>

<template>
  <VcDateRangePickerRoot>
    <VcDateRangePickerHeader />
    <VcDateRangePickerGrid>
      <template #date>
        <VcDateRangePickerDate />
      </template>
    </VcDateRangePickerGrid>
  </VcDateRangePickerRoot>
</template>

Props

Prop

Description

Default

label *

The accessible label for the date picker.

-

allowDeselect

Whether selecting an already selected date should deselect it.

false

allowNonContinuousSelection

When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.

false

classConfig

The class configuration for the component. This allows customizating the default styles by overriding them with custom values.

-

focusOnMount

Whether the calendar should focus on the selected day, today’s date, or the first day of the month when mounted.

false

isDateDisabled

A function to determine whether a specific date should be disabled.

A date that is restricted by rules or settings, such as blackout dates, min/max date limits, or days that should never be selectable (e.g., weekends in a work calendar). These dates are predefined as unselectable, regardless of external availability.

false

isDateUnavailable

A function to determine whether a specific date is unavailable.

A date that is not selectable because it is already booked, occupied, or reserved based on external data (e.g., a hotel booking system showing fully booked days). The user sees these dates but cannot pick them.

false

isDisabled

Determines whether the element is disabled. When true, the element becomes non-interactive.

false

maxDate

The latest selectable date.

null

minDate

The earliest selectable date.

null

showTwoMonths

Whether the calendar should display two months instead of one.

false

testId

A unique identifier used for testing purposes. If set to null, no test ID will be applied.

null

variant

The visual style of the date range picker.

null

Methods

Method

Description

Type

isDateDisabled

A function to determine whether a specific date should be disabled.

A date that is restricted by rules or settings, such as blackout dates, min/max date limits, or days that should never be selectable (e.g., weekends in a work calendar). These dates are predefined as unselectable, regardless of external availability.

(date: Date) => boolean

isDateUnavailable

A function to determine whether a specific date is unavailable.

A date that is not selectable because it is already booked, occupied, or reserved based on external data (e.g., a hotel booking system showing fully booked days). The user sees these dates but cannot pick them.

(date: Date) => boolean

Default styles

Slot

Classes

base

-

date

group/date group/date relative select-none isolate data-outside-view:invisible flex items-center justify-center text-sm text-secondary not-data-highlighted:not-data-highlighted-start:not-data-selected:not-data-selection-start:not-data-selection-end:data-outside-view:text-disabled data-disabled:text-disabled data-unavailable:text-disabled data-highlighted:bg-brand-secondary data-selected:bg-brand-secondary data-highlighted-start:bg-brand-secondary data-highlighted-end:bg-brand-secondary data-selection-start:bg-brand-secondary data-selection-end:bg-brand-secondary dark:data-highlighted:bg-brand-950 dark:data-selected:bg-brand-950 dark:data-highlighted-start:bg-brand-950 dark:data-highlighted-end:bg-brand-950 dark:data-selection-start:bg-brand-950 dark:data-selection-end:bg-brand-950 data-highlighted:text-brand-primary data-selected:text-brand-primary data-highlighted-start:text-primary-on-brand data-highlighted-end:text-primary-on-brand data-selection-start:text-primary-on-brand data-selection-end:text-primary-on-brand data-first-day-of-week:rounded-l-full data-first-day-of-month:rounded-l-full data-last-day-of-week:rounded-r-full data-last-day-of-month:rounded-r-full data-selection-start:rounded-l-full data-selection-end:rounded-r-full data-highlighted-start:rounded-l-full data-highlighted-end:rounded-r-full data-highlighted-end:not-data-highlighted-start:not-data-first-day-of-week:not-data-first-day-of-month:rounded-l-none cursor-pointer data-disabled:cursor-not-allowed size-10 outline-brand-500 data-selected:outline-offset-2

grid

w-70

gridBody

flex flex-col gap-y-xs

gridContainer

flex gap-xl

gridRow

grid grid-cols-7 items-center

header

grid grid-cols-[1fr_auto_1fr] items-center size-full

headerContainer

flex justify-between gap-xl mb-lg

monthSeparator

w-px bg-tertiary

todayIndicator

absolute bottom-1 left-1/2 -translate-x-1/2 size-1 rounded-full bg-brand-solid group-data-selection-start/date:bg-white group-data-selection-end/date:bg-white group-data-highlighted-start/date:bg-white group-data-highlighted-end/date:bg-white

weekDayLabel

font-medium text-secondary text-sm size-10 flex items-center justify-center

innerDate

size-full flex items-center justify-center rounded-full group-data-highlighted-start/date:bg-brand-solid group-data-highlighted-end/date:bg-brand-solid group-data-selection-start/date:bg-brand-solid group-data-selection-end/date:bg-brand-solid not-group-data-selected/date:group-hover/date:bg-brand-primary

Examples

Only show 1 month

Min & Max

Non-continous range