Date Range Picker

A date range selector composing Calendar in range mode with a Popover trigger. Displays a formatted summary of the selected from/to dates in the trigger button.

1/10/2024 → 1/24/2024

import { DateRangePicker } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add date-range-picker

Import

import.tsx

import { DateRangePicker } from "@aetherstack/patterns"

Usage

date-range-picker.tsx

import * as React from "react"
import { DateRangePicker } from "@aetherstack/patterns"

export function MyDateRange() {
  const [value, setValue] = React.useState<{ from?: Date; to?: Date }>({})
  return (
    <DateRangePicker
      value={value}
      onValueChange={setValue}
      placeholder="Pick a date range"
    />
  )
}

Props

Prop	Type	Default	Description
value*	{ from?: Date; to?: Date }	—	Controlled selected date range.
onValueChange*	(value: { from?: Date; to?: Date }) => void	—	Callback fired when the range changes.
placeholder	string	"Pick a date range"	Trigger button text when no range is selected.
disabled	boolean	false	Disables the trigger button.
className	string	—	Additional classes on the popover trigger.

* Required

Accessibility

→The trigger button carries an accessible label derived from the selected range or the placeholder.
→Calendar uses a grid role with arrow-key navigation; Enter selects a date.
→Popover closes on Escape and when focus leaves the floating panel.