Hewn
Components

Components

DateRangePicker

Accessible start and end date fields with a range calendar popover and optional presets.

newfree

Install

@hewnui/ui · hewnui

Terminal
npm install @hewnui/ui
Terminal
pnpm add @hewnui/ui
Terminal
yarn add @hewnui/ui
Terminal
bun add @hewnui/ui
Terminal
npx hewnui@latest add date-range-picker

DateRangePicker wraps React Aria date segments and RangeCalendar navigation with optional quick-select presets. Lives under Date and Time in the component gallery.

Travel dates
Pick a start and end, or use a preset.

Usage

TSX
import { DateRangePicker } from "@hewnui/ui";

<DateRangePicker
  label="Travel dates"
  description="Inclusive stay"
  startName="start"
  endName="end"
/>

Presets

Built-in presets cover Today, Last 7 days, Last 30 days, and This month. Pass showPresets={false} to hide them, or supply a custom presets list.

TSX
<DateRangePicker
  label="Report range"
  presets={["today", "last-7-days", "this-month"]}
/>

Bounds and unavailable dates

TSX
import { getLocalTimeZone, today } from "@internationalized/date";

const now = today(getLocalTimeZone());

<DateRangePicker
  label="Booking window"
  minValue={now}
  maxValue={now.add({ months: 3 })}
  isDateUnavailable={(date) => date.toDate(getLocalTimeZone()).getDay() === 0}
/>

Accessibility

  • Dual segmented date fields for start and end
  • Range calendar grid keyboard navigation
  • Localized formatting via React Aria
  • Form submission through startName and endName

API reference

Props for DateRangePicker from @hewnui/ui/date-range-picker. Generated from component types — not hand-written.

Prop

Type

DatePicker

Accessible date field with calendar popover.

ColorPicker

Composable color picker with area, hue and alpha sliders, hex field, and swatch presets.

On this page

UsagePresetsBounds and unavailable datesAccessibility