Components

Date Range Picker

A date range picker component with two side-by-side calendars for selecting a start and end date.

Basic Usage

The DateRangePicker component displays two side-by-side calendars for selecting a date range. Click a start date, then click an end date to complete the range. The selected range is highlighted between the two dates.

Date Range

–

import { useState } from "react"
import { DateRangePicker } from "@epilot/volt-ui"
import type { DateRange } from "@epilot/volt-ui"

const MyComponent = () => {
  const [value, setValue] = useState<DateRange>({
    start: new Date(),
    end: null,
  })

  return (
    <DateRangePicker
      label="Date Range"
      value={value}
      onChange={setValue}
      locale="en"
    />
  )
}

Disable Past Dates

Use the disablePast prop to prevent selection of dates in the past.

Future Dates Only

–

<DateRangePicker
  label="Future Dates Only"
  value={value}
  onChange={setValue}
  disablePast
/>

With Error State

Pass an error prop to display validation errors.

Date Range

–

Please select a valid date range

<DateRangePicker
  label="Date Range"
  value={value}
  onChange={setValue}
  error="Please select a valid date range"
/>

API Reference

DateRangePicker

The main component that combines dual date inputs with a popover containing two side-by-side calendars.

Prop	Type	Default	Description
`value`	`DateRange`	-	The selected date range (`{ start: Date \| null, end: Date \| null }`).
`onChange`	`(range: DateRange) => void`	-	Callback fired when the date range changes.
`onBlur`	`() => void`	-	Callback fired when an input loses focus.
`disabled`	`boolean`	`false`	When true, the picker is disabled.
`disablePast`	`boolean`	`false`	When true, past dates cannot be selected.
`label`	`string`	-	Label text displayed above the input.
`error`	`string`	-	Error message to display below the input.
`startPlaceholder`	`string`	`"dd/mm/yyyy"`	Placeholder for the start date input.
`endPlaceholder`	`string`	`"dd/mm/yyyy"`	Placeholder for the end date input.
`format`	`string`	`"dd/MM/yyyy"`	Date format string (uses date-fns format tokens).
`locale`	`"en" \| "de" \| "fr"`	`"de"`	Locale for month/day names and formatting.
`className`	`string`	-	Additional CSS classes for the container.
`keyboardIcon`	`ReactNode`	`<CalendarIcon />`	Custom icon for the calendar button.
`inputAriaLabel`	`string`	-	Aria-label for the start date input.
`openPickerAriaLabel`	`string`	`"Open date picker"`	Aria-label for the calendar button.
`previousMonthLabel`	`string`	`"Previous month"`	Aria-label for the previous month button.
`nextMonthLabel`	`string`	`"Next month"`	Aria-label for the next month button.
`testId`	`string`	-	Test ID prefix (creates `{testId}-start` and `{testId}-end`).
`currentTimeInTimezone`	`Date`	-	Override "now" for timezone-aware past checks.

RangeCalendar

Standalone two-panel range calendar for date range selection.

Prop	Type	Default	Description
`value`	`DateRange`	-	The selected date range.
`onChange`	`(range: DateRange) => void`	-	Callback fired when the range changes.
`onRangeComplete`	`() => void`	-	Callback fired when both start and end are selected.
`disablePast`	`boolean`	`false`	When true, past dates are disabled.
`locale`	`"en" \| "de" \| "fr"`	`"de"`	Locale for month/day names.
`previousMonthLabel`	`string`	`"Previous month"`	Aria-label for the previous month button.
`nextMonthLabel`	`string`	`"Next month"`	Aria-label for the next month button.
`currentTimeInTimezone`	`Date`	-	Override "now" for timezone-aware past checks.

Dependencies

This component reuses the same Calendar component and date-fns utilities as the DateTimePicker.

Selection & Actions

Row selection, bulk actions, row actions, and clickable rows.

Date Time Picker

A date and time picker component with calendar and time selection.

On this page

Basic Usage Disable Past Dates With Error State API Reference DateRangePicker RangeCalendar Dependencies