Version 0.14.3

DateRangePicker

A date range picker that combines two date fields and a calendar popover for selecting a start and end date.

Date range

Usage#

import { DateRangePicker } from '@backstage/ui';

<DateRangePicker label="Date range" />

API reference#

PropTypeDefaultDescription
size
smallmedium
smallVisual size of the picker. Use small for dense layouts, medium for prominent fields.
label
string
-Visible label displayed above the picker.
secondaryLabel
string
-Secondary text shown next to the label. If not provided and isRequired is true, displays Required.
description
string
-Help text displayed below the label.
value
RangeValue<DateValue>
-Controlled value of the date range.
defaultValue
RangeValue<DateValue>
-Default value for uncontrolled usage.
onChange
(value: RangeValue<DateValue> | null) => void
-Handler called when the selected range changes.
granularity
dayhourminutesecond
daySmallest unit displayed. Defaults to "day" for dates and "minute" for times.
minValue
DateValue
-Minimum allowed date. Dates before this are disabled.
maxValue
DateValue
-Maximum allowed date. Dates after this are disabled.
isDateUnavailable
(date: DateValue) => boolean
-Callback invoked for each calendar date. Return true to mark a date as unavailable.
allowsNonContiguousRanges
boolean
-When combined with isDateUnavailable, allows selecting ranges that contain unavailable dates.
startName
string
-Form field name for the start date, submitted as ISO 8601.
endName
string
-Form field name for the end date, submitted as ISO 8601.
isRequired
boolean
-Whether the field is required for form submission.
isDisabled
boolean
-Whether the picker is disabled.
isReadOnly
boolean
-Whether the picker is read-only.
className
string
-Additional CSS class name for custom styling.
style
CSSProperties
-Inline CSS styles object.

Inherits all React Aria DateRangePicker props.

Examples#

Sizes#

<Flex direction="column" gap="4">
  <DateRangePicker label="Small" size="small" />
  <DateRangePicker label="Medium" size="medium" />
</Flex>
Small
Medium

With default value#

import { parseDate } from '@internationalized/date';

<DateRangePicker
  label="Booking period"
  defaultValue={{
    start: parseDate('2025-02-03'),
    end: parseDate('2025-02-14'),
  }}
/>
Booking period

Disabled#

<DateRangePicker
  label="Date range"
  isDisabled
/>
Date range

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

  • bui-DateRangePicker

Changelog#