rc

useDatePickerState

Provides state management for a date picker component. A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.

installyarn add @react-stately/datepicker
version3.0.0-rc.0
usageimport {useDatePickerState} from '@react-stately/datepicker'

API#


useDatePickerState( (props: DatePickerStateOptions )): DatePickerState

Interface#


Properties

NameTypeDescription
valueDateValueThe currently selected date.
dateValueDateValue

The date portion of the value. This may be set prior to value if the user has selected a date but has not yet selected a time.

timeValueTimeValue

The time portion of the value. This may be set prior to value if the user has selected a time but has not yet selected a date.

granularityGranularityThe granularity for the field, based on the granularity prop and current value.
hasTimebooleanWhether the date picker supports selecting a time, 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: DateValue )): voidSets the selected date.
setDateValue( (value: CalendarDate )): voidSets the date portion of the value.
setTimeValue( (value: TimeValue )): voidSets the time portion of the value.
setOpen( (isOpen: boolean )): voidSets whether the calendar popover is open.
formatValue( (locale: string, , fieldOptions: FieldOptions )): stringFormats the selected value using the given options.

Example#


See the docs for useDatePicker in react-aria for an example of useDatePickerState.