Date ranges without the fragile edge cases.

A complete field for picking, typing and validating date ranges. Bring your own visual system; keep one reliable interaction model.

Try the field

Type a date, select a new range, or open the calendar with the keyboard.

Stay dates

Start date

End date

Masked inputRange validationFocus-safe

Reliable behavior

Range transitions, typed input and validation stay in sync.

Keyboard-ready

Navigation and focus restoration are considered from the start.

Designed to adapt

Use slots, data attributes or an unstyled base in any system.

Fit it into your stack.

Start with useful defaults, tune every visual slot, or remove the defaults entirely and connect it to your own primitives.

<RangeCalendar
  defaultValue={range}
  inputFormat="YYYY-MM-DD"
  classNames={{ field: "your-field" }}
/>

Make it yours.

Change a few decisions and see the same range behavior adapt in real time.

Visual direction

Date format

Months shown

Week starts on

Popover side

Behavior

Date Range

Start date

End date

Active API

<RangeCalendar
  defaultValue={range}
  inputFormat="MM/DD/YYYY"
  numberOfMonths={1}
  weekStartsOn={1}
  popoverSide="bottom"
  fromPlaceholder="Arrival"
  toPlaceholder="Departure"
  popoverAvoidCollisions={false}
  classNames={violetTheme}
>
  Date Range
</RangeCalendar>

The same behavior, three different directions.

Styling is not an afterthought: the field can live naturally in product, consumer and data-heavy interfaces.

Report period

Start date

End date

Neutral product UI

The original use case: selecting a reliable period for generated reports.

Analytics period

Start date

End date

Dense analytics dashboard

Full-width, compact and high-contrast for data-heavy workflows.

Travel dates

Start date

End date

Travel and lifestyle

Soft, expressive and friendly without changing range behavior.

Log interval

Start date

End date

Dark technical interface

Monospace dates and a crisp cyan accent for technical products.

Publication window

Start date

End date

Minimal, content-first UI

Almost no chrome: typography and whitespace do the visual work.

Campaign period

Start date

End date

Bold commerce UI

A branded block treatment for checkout and promotional experiences.