BaseDatePicker

A date, or a stretch of dates, chosen from a calendar in a popover.

Import it from rei-kit: import { BaseDatePicker } from 'rei-kit'

Open BaseDatePicker in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { BaseDatePicker, addDays, todayKey } from 'rei-kit'
import type { DateRange } from 'rei-kit'

const span = ref<DateRange | undefined>()

const presets = [
  { label: 'Last 7 days', value: () => ({ start: addDays(todayKey(), -6), end: todayKey() }) },
  { label: 'Last 30 days', value: () => ({ start: addDays(todayKey(), -29), end: todayKey() }) },
]
</script>

<template>
  <BaseDatePicker
    v-model="span"
    mode="range"
    label="Report period"
    placeholder="Choose a period"
    clear-label="Clear the period"
    :presets="presets"
    previous-label="Previous month"
    next-label="Next month"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`label`	`string`	yes
`mode`	`M`		One day, or a stretch from one day to another.
`placeholder`	`string`		What the field shows while nothing is chosen.
`format`	`Intl.DateTimeFormatOptions`		How the chosen date reads, through `Intl.DateTimeFormat`.
`presets`	`readonly DatePreset[]`		Ready-made answers beside the calendar: "Last 7 days", "This month".
`clearLabel`	`string`		Given, the field grows a button that empties it. Its accessible name.
`min`	`string`
`max`	`string`
`isDisabled`	`((key: string) => boolean)`
`weekStartsOn`	`WeekStart`
`previousLabel`	`string`	yes	Accessible name of the calendar's back arrow.
`nextLabel`	`string`	yes	Accessible name of the calendar's forward arrow.
`today`	`string`		Which day the calendar marks as today. Given, so a demo or a test can fix it.
`error`	`string`
`hint`	`string`
`size`	`'sm' \| 'md'`
`labelHidden`	`boolean`
`disabled`	`boolean`
`fieldId`	`string`		Ties the generated id to a name you choose, so `ErrorSummary` can link to this field. Its links point at nothing without it, and the kit's own `FormField` has taken one since 2.22.0 while the fields built on it did not — which left building a form out of these and summarising its errors impossible without hand-writing the control.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub