DateRangeInput

A date range picker input that opens a calendar popover for selecting a start and end date.

Examples

Default

Window

May 10, 2026 - May 16, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

Clickable Date Text

Window

May 10, 2026 - May 16, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

Single Date

Window

Aug 9, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => singleDateRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

Empty

Window

Select a date range

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(null);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

With Clear

Window

May 10, 2026 - May 16, 2026

Clear Window

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

With Constraints

Window

May 10, 2026 - May 16, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return (
    <DateRangeInput
      {...args}
      max={plainDateCreate(2026, 5, 28)}
      min={plainDateCreate(2026, 5, 5)}
      onChange={setValue}
      value={value}
    />
  );
}

Maximum Fourteen Day Range

WindowSelect a range of up to 14 days.

May 10, 2026 - May 16, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

Disabled Weekends

Window

May 10, 2026 - May 16, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return (
    <DateRangeInput
      {...args}
      getIsDateDisabled={date => date.dayOfWeek === 6 || date.dayOfWeek === 7}
      onChange={setValue}
      value={value}
    />
  );
}

Disabled

Window

May 10, 2026 - May 16, 2026

<DateRangeInput {...args} onChange={() => {}} value={defaultRange} />

Loading

Window

May 10, 2026 - May 16, 2026

<DateRangeInput {...args} onChange={() => {}} value={defaultRange} />

Error Status

Window

May 10, 2026 - May 16, 2026

End date must be after start date

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

Warning Status

Window

May 10, 2026 - May 16, 2026

Range exceeds 7 days

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

Single Month

Window

May 10, 2026 - May 16, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

With Description

WindowSelect a check-in and check-out date.

May 10, 2026 - May 16, 2026

(args: DateRangeInputProps) => {
  const [value, setValue] = useState<DateRange | null>(() => defaultRange);
  return <DateRangeInput {...args} onChange={setValue} value={value} />;
}

Sizes

Small

May 10, 2026 - May 16, 2026

Medium

May 10, 2026 - May 16, 2026

Large

May 10, 2026 - May 16, 2026

() => {
  const [sm, setSm] = useState<DateRange | null>(() => defaultRange);
  const [md, setMd] = useState<DateRange | null>(() => defaultRange);
  const [lg, setLg] = useState<DateRange | null>(() => defaultRange);
  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
      <DateRangeInput label="Small" onChange={setSm} size="sm" value={sm} />
      <DateRangeInput label="Medium" onChange={setMd} size="md" value={md} />
      <DateRangeInput label="Large" onChange={setLg} size="lg" value={lg} />
    </div>
  );
}

Formats

Long

January 5, 2026 - January 12, 2026

Short (default)

Jan 5, 2026 - Jan 12, 2026

ISO

2026-01-05 - 2026-01-12

() => {
  const [long, setLong] = useState<DateRange | null>(() => januaryRange);
  const [short, setShort] = useState<DateRange | null>(() => januaryRange);
  const [iso, setIso] = useState<DateRange | null>(() => januaryRange);
  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
      <DateRangeInput
        format="long"
        label="Long"
        onChange={setLong}
        value={long}
      />
      <DateRangeInput
        format="short"
        label="Short (default)"
        onChange={setShort}
        value={short}
      />
      <DateRangeInput
        format="iso"
        label="ISO"
        onChange={setIso}
        value={iso}
      />
    </div>
  );
}

Read Only

Window

May 10, 2026 - May 16, 2026

<DateRangeInput {...args} onChange={() => {}} value={defaultRange} />

API

DateRangeInput

A date range picker input that opens a calendar popover for selecting a start and end date.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the input wrapper.
data-testid	string	—	Test ID applied to the trigger button.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'short'	How each end of the committed range is displayed. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the date.
hasClear	boolean	false	Whether to show a clear button when a value is selected.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDate	—	Maximum selectable date.
maxRangeSpan	Temporal.Duration	—	Maximum duration between the selected range start and end. Must be a non-negative, date-based Temporal duration.
min	PlainDate	—	Minimum selectable date.
minRangeSpan	Temporal.Duration	—	Minimum duration between the selected range start and end. Must be a non-negative, date-based Temporal duration.
numberOfMonths	1 | 2	2	Number of calendar months shown in the popover.
onChange*	(value: DateRange | null) => void	—	Called when the selected date range changes.
placeholder	string	—	Placeholder text shown when no range is selected.
ref	Ref<HTMLButtonElement>	—	Ref forwarded to the trigger button.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the input wrapper.
value*	DateRange | null	—	Currently selected date range. Pass null for an empty input.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the input wrapper.
data-testid	string	—	Test ID applied to the trigger button.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'short'	How each end of the committed range is displayed. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the date.
hasClear	boolean	false	Whether to show a clear button when a value is selected.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDate	—	Maximum selectable date.
maxRangeSpan	Temporal.Duration	—	Maximum duration between the selected range start and end. Must be a non-negative, date-based Temporal duration.
min	PlainDate	—	Minimum selectable date.
minRangeSpan	Temporal.Duration	—	Minimum duration between the selected range start and end. Must be a non-negative, date-based Temporal duration.
numberOfMonths	1 | 2	2	Number of calendar months shown in the popover.
onChange*	(value: DateRange | null) => void	—	Called when the selected date range changes.
placeholder	string	—	Placeholder text shown when no range is selected.
ref	Ref<HTMLButtonElement>	—	Ref forwarded to the trigger button.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the input wrapper.
value*	DateRange | null	—	Currently selected date range. Pass null for an empty input.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the input wrapper.
data-testid	string	—	Test ID applied to the trigger button.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'short'	How each end of the committed range is displayed. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the date.
hasClear	boolean	false	Whether to show a clear button when a value is selected.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDate	—	Maximum selectable date.
maxRangeSpan	Temporal.Duration	—	Maximum duration between the selected range start and end. Must be a non-negative, date-based Temporal duration.
min	PlainDate	—	Minimum selectable date.
minRangeSpan	Temporal.Duration	—	Minimum duration between the selected range start and end. Must be a non-negative, date-based Temporal duration.
numberOfMonths	1 | 2	2	Number of calendar months shown in the popover.
onChange*	(value: DateRange | null) => void	—	Called when the selected date range changes.
placeholder	string	—	Placeholder text shown when no range is selected.
ref	Ref<HTMLButtonElement>	—	Ref forwarded to the trigger button.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the input wrapper.
value*	DateRange | null	—	Currently selected date range. Pass null for an empty input.
isOptional	false	—
isRequired*	true	—