DateRange

stable

Locale-aware date range for settlement windows and reporting periods

import { DateRange } from "@nodus/design-system/finance"

Mar 1, 2026 — Mar 31, 2026January 1, 2026 — December 31, 20263/4 — 3/61. März 2026 — 31. März 2026

Loading demo…

Props

Prop	Type	Default	Description
`start`req	`string \| Date`	—	Start date (ISO string or Date)
`end`req	`string \| Date`	—	End date (ISO string or Date)
`formatStyle`	`"short" \| "medium" \| "long"`	"medium"	Date format style
`separator`	`string`	" — "	Separator between dates
`locale`	`string`	—	BCP 47 locale override
`density`	`"default" \| "compact"`	—	Display density

startrequired

Type string | DateDefault —

Start date (ISO string or Date)

endrequired

Type string | DateDefault —

End date (ISO string or Date)

formatStyle

Type "short" | "medium" | "long"Default "medium"

Date format style

separator

Type stringDefault " — "

Separator between dates

locale

Type stringDefault —

BCP 47 locale override

density

Type "default" | "compact"Default —

Display density

Metadatashortmediumlongsemantic type

MobileWorks As-Is

Date range display is read-only — works at any width. For interactive date range pickers, see the date-range-picker pattern.

Design Rationale

This component was designed to express:

Formatted number display with tabular alignment for financial tables

Was this helpful?