useDateRangePickerState

Provides state management for a date range picker component. A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

install	`yarn add @react-stately/datepicker`
version	3.0.0-rc.0
usage	`import {useDateRangePickerState} from '@react-stately/datepicker'`

View repository

GitHub

View package

NPM

API#

useDateRangePickerState(
  (props: DateRangePickerStateOptions
)): DateRangePickerState

Interface#

Properties

Name	Type	Description
`value`	`DateRange`	The currently selected date range.
`dateRange`	`DateRange`	The date portion of the selected range. This may be set prior to `value` if the user has selected a date range but has not yet selected a time range.
`timeRange`	`TimeRange`	The time portion of the selected range. This may be set prior to `value` if the user has selected a time range but has not yet selected a date range.
`granularity`	`Granularity`	The granularity for the field, based on the `granularity` prop and current value.
`hasTime`	`boolean`	Whether the date range picker supports selecting times, according to the `granularity` prop and current value.
`isOpen`	`boolean`	Whether the calendar popover is currently open.
`validationState`	`ValidationState`	The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props.

Methods

Method	Description
`setValue( (value: DateRange )): void`	Sets the selected date range.
`setDateRange( (value: DateRange )): void`	Sets the date portion of the selected range.
`setTimeRange( (value: TimeRange )): void`	Sets the time portion of the selected range.
`setDate( (part: 'start' \| \| 'end', , value: DateValue )): void`	Sets the date portion of either the start or end of the selected range.
`setTime( (part: 'start' \| \| 'end', , value: TimeValue )): void`	Sets the time portion of either the start or end of the selected range.
`setDateTime( (part: 'start' \| \| 'end', , value: DateValue )): void`	Sets the date and time of either the start or end of the selected range.
`setOpen( (isOpen: boolean )): void`	Sets whether the calendar popover is open.
`formatValue( (locale: string, , fieldOptions: FieldOptions )): {start: string, end: string }`	Formats the selected range using the given options.
`confirmPlaceholder(): void`	Replaces the start and/or end value of the selected range with the placeholder value if unentered.

Example#

See the docs for useDateRangePicker in react-aria for an example of useDateRangePickerState.

Name	Type	Default	Description
`shouldCloseOnSelect`	`boolean \| () => boolean`	`true`	Determines whether the date picker popover should close automatically when a date is selected.
`allowsNonContiguousRanges`	`boolean`	—	When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
`minValue`	`DateValue`	—	The minimum allowed date that a user may select.
`maxValue`	`DateValue`	—	The maximum allowed date that a user may select.
`isDateUnavailable`	`( (date: DateValue )) => boolean`	—	Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
`placeholderValue`	`DateValue`	—	A placeholder date to display when no value is selected. Defaults to today's date at midnight.
`hourCycle`	`12 \| 24`	—	Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
`granularity`	`Granularity`	—	Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.
`hideTimeZone`	`boolean`	`false`	Whether to hide the time zone abbreviation.
`isDisabled`	`boolean`	—	Whether the input is disabled.
`isReadOnly`	`boolean`	—	Whether the input can be selected but not changed by the user.
`validationState`	`ValidationState`	—	Whether the input should display its "valid" or "invalid" visual styling.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render.
`onFocus`	`( (e: FocusEvent )) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent )) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is released.
`label`	`ReactNode`	—	The content to display as the label.
`description`	`ReactNode`	—	A description for the field. Provides a hint such as specific requirements for what to choose.
`errorMessage`	`ReactNode`	—	An error message for the field.
`isOpen`	`boolean`	—	Whether the overlay is open by default (controlled).
`defaultOpen`	`boolean`	—	Whether the overlay is open by default (uncontrolled).
`onOpenChange`	`( (isOpen: boolean )) => void`	—	Handler that is called when the overlay's open state changes.
`value`	`RangeValue<DateValue>`	—	The current value (controlled).
`defaultValue`	`RangeValue<DateValue>`	—	The default value (uncontrolled).
`onChange`	`( (value: RangeValue<MappedDateValue<DateValue>> )) => void`	—	Handler that is called when the value changes.

CalendarDate
  | CalendarDateTime
  | ZonedDateTime

A CalendarDate represents a date without any time components in a specific calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): CalendarDate`	Returns a copy of this date.
`add( (duration: DateDuration )): CalendarDate`	Returns a new `CalendarDate` with the given duration added to it.
`subtract( (duration: DateDuration )): CalendarDate`	Returns a new `CalendarDate` with the given duration subtracted from it.
`set( (fields: DateFields )): CalendarDate`	Returns a new `CalendarDate` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField, amount: number, options?: CycleOptions ): CalendarDate`	Returns a new `CalendarDate` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate( (timeZone: string )): Date`	Converts the date to a native JavaScript Date object, with the time set to midnight in the given time zone.
`toString(): string`	Converts the date to an ISO 8601 formatted string.
`compare( (b: AnyCalendarDate )): number`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

The Calendar interface represents a calendar system, including information about how days, months, years, and eras are organized, and methods to perform arithmetic on dates.

Properties

Name	Type	Description
`identifier`	`string`	A string identifier for the calendar, as defined by Unicode CLDR.

Methods

Method	Description
`fromJulianDay( (jd: number )): CalendarDate`	Creates a CalendarDate in this calendar from the given Julian day number.
`toJulianDay( (date: AnyCalendarDate )): number`	Converts a date in this calendar to a Julian day number.
`getDaysInMonth( (date: AnyCalendarDate )): number`	Returns the number of days in the month of the given date.
`getMonthsInYear( (date: AnyCalendarDate )): number`	Returns the number of months in the year of the given date.
`getYearsInEra( (date: AnyCalendarDate )): number`	Returns the number of years in the era of the given date.
`getEras(): string[]`	Returns a list of era identifiers for the calendar.
`getMinimumMonthInYear( (date: AnyCalendarDate )): number`	Returns the minimum month number of the given date's year. Normally, this is 1, but in some calendars such as the Japanese, eras may begin in the middle of a year.
`getMinimumDayInMonth( (date: AnyCalendarDate )): number`	Returns the minimum day number of the given date's month. Normally, this is 1, but in some calendars such as the Japanese, eras may begin in the middle of a month.

Name	Type	Description
`calendar`	`Calendar`
`era`	`string`
`year`	`number`
`month`	`number`
`day`	`number`

Method	Description
`copy():`

Represents an amount of time in calendar-specific units, for use when performing arithmetic.

Name	Type	Description
`years`	`number`	The number of years to add or subtract.
`months`	`number`	The number of months to add or subtract.
`weeks`	`number`	The number of weeks to add or subtract.
`days`	`number`	The number of days to add or subtract.

Name	Type	Description
`era`	`string`
`year`	`number`
`month`	`number`
`day`	`number`

'era'
  | 'year'
  | 'month'
  | 'day'

Name	Type	Description
`round`	`boolean`	Whether to round the field value to the nearest interval of the amount.

A CalendarDateTime represents a date and time without a time zone, in a specific calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.
`hour`	`number`	The hour in the day, numbered from 0 to 23.
`minute`	`number`	The minute in the hour.
`second`	`number`	The second in the minute.
`millisecond`	`number`	The millisecond in the second.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): CalendarDateTime`	Returns a copy of this date.
`add( (duration: DateTimeDuration )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given duration added to it.
`subtract( (duration: DateTimeDuration )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given duration subtracted from it.
`set( (fields: DateFields & & TimeFields )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField \| \| TimeField, amount: number, options?: CycleTimeOptions ): CalendarDateTime`	Returns a new `CalendarDateTime` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate( (timeZone: string, , disambiguation?: Disambiguation )): Date`	Converts the date to a native JavaScript Date object in the given time zone.
`toString(): string`	Converts the date to an ISO 8601 formatted string.
`compare( (b: CalendarDate \| CalendarDateTime \| ZonedDateTime )): number`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

Represents an amount of time with both date and time components, for use when performing arithmetic.

Name	Type	Description
`years`	`number`	The number of years to add or subtract.
`months`	`number`	The number of months to add or subtract.
`weeks`	`number`	The number of weeks to add or subtract.
`days`	`number`	The number of days to add or subtract.
`hours`	`number`	The number of hours to add or subtract.
`minutes`	`number`	The number of minutes to add or subtract.
`seconds`	`number`	The number of seconds to add or subtract.
`milliseconds`	`number`	The number of milliseconds to add or subtract.

Name	Type	Description
`hour`	`number`
`minute`	`number`
`second`	`number`
`millisecond`	`number`

'hour'
  | 'minute'
  | 'second'
  | 'millisecond'

Name	Type	Default	Description
`hourCycle`	`12 \| 24`	`24`	Whether to use 12 or 24 hour time. If 12 hour time is chosen, the resulting value will remain in the same day period as the original value (e.g. if the value is AM, the resulting value also be AM).
`round`	`boolean`	—	Whether to round the field value to the nearest interval of the amount.

'compatible'
  | 'earlier'
  | 'later'
  | 'reject'

A ZonedDateTime represents a date and time in a specific time zone and calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.
`hour`	`number`	The hour in the day, numbered from 0 to 23.
`minute`	`number`	The minute in the hour.
`second`	`number`	The second in the minute.
`millisecond`	`number`	The millisecond in the second.
`timeZone`	`string`	The IANA time zone identifier that this date and time is represented in.
`offset`	`number`	The UTC offset for this time, in seconds.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): ZonedDateTime`	Returns a copy of this date.
`add( (duration: DateTimeDuration )): void`	Returns a new `ZonedDateTime` with the given duration added to it.
`subtract( (duration: DateTimeDuration )): void`	Returns a new `ZonedDateTime` with the given duration subtracted from it.
`set( (fields: DateFields & & TimeFields, , disambiguation?: Disambiguation )): void`	Returns a new `ZonedDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField \| \| TimeField, amount: number, options?: CycleTimeOptions ): void`	Returns a new `ZonedDateTime` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate(): void`	Converts the date to a native JavaScript Date object.
`toString(): void`	Converts the date to an ISO 8601 formatted string, including the UTC offset and time zone identifier.
`toAbsoluteString(): void`	Converts the date to an ISO 8601 formatted string in UTC.
`compare( (b: CalendarDate \| CalendarDateTime \| ZonedDateTime )): void`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

'day'
  | 'hour'
  | 'minute'
  | 'second'
  | 'millisecond'

'valid' | 'invalid'

BaseEvent<ReactKeyboardEvent<any>>

SyntheticEvent & {stopPropagation: () => void,
continuePropagation: () => void
}

Name	Type	Description
`start`	`T`	The start value of the range.
`end`	`T`	The end value of the range.

DateValue extends ZonedDateTime ? ZonedDateTime :
DateValue extends CalendarDateTime ? CalendarDateTime :
DateValue extends CalendarDate ? CalendarDate : never

Properties

Name	Type	Description
`value`	`DateRange`	The currently selected date range.
`dateRange`	`DateRange`	The date portion of the selected range. This may be set prior to `value` if the user has selected a date range but has not yet selected a time range.
`timeRange`	`TimeRange`	The time portion of the selected range. This may be set prior to `value` if the user has selected a time range but has not yet selected a date range.
`granularity`	`Granularity`	The granularity for the field, based on the `granularity` prop and current value.
`hasTime`	`boolean`	Whether the date range picker supports selecting times, according to the `granularity` prop and current value.
`isOpen`	`boolean`	Whether the calendar popover is currently open.
`validationState`	`ValidationState`	The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props.

Methods

Method	Description
`setValue( (value: DateRange )): void`	Sets the selected date range.
`setDateRange( (value: DateRange )): void`	Sets the date portion of the selected range.
`setTimeRange( (value: TimeRange )): void`	Sets the time portion of the selected range.
`setDate( (part: 'start' \| \| 'end', , value: DateValue )): void`	Sets the date portion of either the start or end of the selected range.
`setTime( (part: 'start' \| \| 'end', , value: TimeValue )): void`	Sets the time portion of either the start or end of the selected range.
`setDateTime( (part: 'start' \| \| 'end', , value: DateValue )): void`	Sets the date and time of either the start or end of the selected range.
`setOpen( (isOpen: boolean )): void`	Sets whether the calendar popover is open.
`formatValue( (locale: string, , fieldOptions: FieldOptions )): {start: string, end: string }`	Formats the selected range using the given options.
`confirmPlaceholder(): void`	Replaces the start and/or end value of the selected range with the placeholder value if unentered.

RangeValue<DateValue>

RangeValue<TimeValue>

Time
  | CalendarDateTime
  | ZonedDateTime

A Time represents a clock time without any date components.

Properties

Name	Type	Description
`hour`	`number`	The hour, numbered from 0 to 23.
`minute`	`number`	The minute in the hour.
`second`	`number`	The second in the minute.
`millisecond`	`number`	The millisecond in the second.

Methods

Method	Description
`constructor( hour: number, minute: number, second: number, millisecond: number ): void`
`copy(): Time`	Returns a copy of this time.
`add( (duration: TimeDuration )): void`	Returns a new `Time` with the given duration added to it.
`subtract( (duration: TimeDuration )): void`	Returns a new `Time` with the given duration subtracted from it.
`set( (fields: TimeFields )): void`	Returns a new `Time` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: TimeField, amount: number, options?: CycleTimeOptions ): void`	Returns a new `Time` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toString(): void`	Converts the time to an ISO 8601 formatted string.
`compare( (b: AnyTime )): void`	Compares this time with another. A negative result indicates that this time is before the given one, and a positive time indicates that it is after.

Represents an amount of time, for use whe performing arithmetic.

Name	Type	Description
`hours`	`number`	The number of hours to add or subtract.
`minutes`	`number`	The number of minutes to add or subtract.
`seconds`	`number`	The number of seconds to add or subtract.
`milliseconds`	`number`	The number of milliseconds to add or subtract.

Name	Type	Description
`hour`	`number`
`minute`	`number`
`second`	`number`
`millisecond`	`number`

Method	Description
`copy():`

Pick<Intl.DateTimeFormatOptions, 'year'
  | 'month'
  | 'day'
  | 'hour'
  | 'minute'
  | 'second'>