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
version3.32.2
usageimport {useDatePickerState} from 'react-stately'

API#


useDatePickerState<T extends DateValue = DateValue>( (props: DatePickerStateOptions<T> )): DatePickerState

Interface#


Properties

NameTypeDescription
valueDateValuenullThe 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.
isInvalidbooleanWhether the date 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: DateValuenull )): 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.
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 useDatePicker in react-aria for an example of useDatePickerState.