rc

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/datepicker
version3.0.0-rc.0
usageimport {useDateRangePickerState} from '@react-stately/datepicker'

API#


useDateRangePickerState( (props: DateRangePickerStateOptions )): DateRangePickerState

Interface#


Properties

NameTypeDescription
valueDateRangeThe currently selected date range.
dateRangeDateRange

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.

timeRangeTimeRange

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.
validationStateValidationStateThe current validation state of the date picker, based on the validationState, minValue, and maxValue props.

Methods

MethodDescription
setValue( (value: DateRange )): 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.
confirmPlaceholder(): voidReplaces 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.