/ux
Components/Misc/DateRangePicker

DateRangePicker

Misc

Dual-calendar range selector.

Date range selection with a sidebar of preset buttons and a dual-month calendar. Selection is staged until Apply is clicked, allowing free exploration before committing.

Usage

import { DateRangePicker } from "nosible-ux"

export default function Example() {
  return <DateRangePicker defaultPreset="30d" />
}

Examples

Controlled with preset

Accessibility

Presets are listed as buttons with descriptive labels. The calendar grid has keyboard navigation. Apply button is the confirmation action; Escape cancels.

Props

Name TypeDefaultDescription
defaultOpen
boolean | undefined—Open the popover on first render. Default: `false`.
defaultPreset
PresetKey | undefined—Preset to apply on first render.
onChange
((range?: DateRange | undefined) => void) | undefined—Called when the user clicks Apply. Receives the confirmed range.
open
boolean | undefined—Demo-only: force the panel open and render it inline (no portal).
referenceDate
Date | undefined—Reference date used when computing preset ranges. Default: `new Date()`.
value
DateRange | undefined—Currently selected date range (controlled). Omit to use internal state (uncontrolled).
← All ComponentsGetting Started →