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.

installyarn add react-stately
version3.32.2
usageimport {useDateRangePickerState} from 'react-stately'

API#


useDateRangePickerState<T extends DateValue = DateValue>( (props: DateRangePickerStateOptions<T> )): DateRangePickerState

Interface#


Properties

NameTypeDescription
valueDateRangenullThe currently selected date range.
dateRangeDateRangenull

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.

timeRangeTimeRangenull

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.

granularityGranularityThe granularity for the field, based on the granularity prop and current value.
hasTimebooleanWhether the date range picker supports selecting times, according to the granularity prop and current value.
isOpenbooleanWhether the calendar popover is currently open.
isInvalidbooleanWhether the date range picker is invalid, based on the isInvalid, minValue, and maxValue props.
realtimeValidationValidationResultRealtime validation results, updated as the user edits the value.
displayValidationValidationResultCurrently displayed validation results, updated when the user commits their changes.

Methods

MethodDescription
setValue( (value: DateRangenull )): voidSets the selected date range.
setDateRange( (value: DateRange )): voidSets the date portion of the selected range.
setTimeRange( (value: TimeRange )): voidSets the time portion of the selected range.
setDate( (part: 'start''end', , value: DateValue )): voidSets the date portion of either the start or end of the selected range.
setTime( (part: 'start''end', , value: TimeValue )): voidSets the time portion of either the start or end of the selected range.
setDateTime( (part: 'start''end', , value: DateValue )): voidSets the date and time of either the start or end of the selected range.
setOpen( (isOpen: boolean )): voidSets whether the calendar popover is open.
formatValue( (locale: string, , fieldOptions: FieldOptions )): {
start: string,
end: string
}
Formats the selected range using the given options.
getDateFormatter( (locale: string, , formatOptions: FormatterOptions )): DateFormatterGets a formatter based on state's props.
open(): voidOpens the overlay.
close(): voidCloses the overlay.
toggle(): voidToggles the overlay's visibility.
updateValidation( (result: ValidationResult )): voidUpdates the current validation result. Not displayed to the user until commitValidation is called.
resetValidation(): voidResets the displayed validation state to valid when the user resets the form.
commitValidation(): voidCommits the realtime validation so it is displayed to the user.

Example#


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