useTimeFieldState

Provides state management for a time field component. A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.

install	`yarn add react-stately`
version	3.33.0
usage	`import {useTimeFieldState} from 'react-stately'`

View repository

GitHub

View package

NPM

API#

useTimeFieldState<T extends TimeValue = TimeValue>(
  (props: TimeFieldStateOptions<T>
)): TimeFieldState

Interface#

Properties

Name	Type	Description
`timeValue`	`Time`	The current time value.
`value`	`DateValue \| null`	The current field value.
`dateValue`	`Date`	The current value, converted to a native JavaScript `Date` object.
`calendar`	`Calendar`	The calendar system currently in use.
`segments`	`DateSegment[]`	A list of segments for the current value.
`dateFormatter`	`DateFormatter`	A date formatter configured for the current locale and format.
`isInvalid`	`boolean`	Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props.
`granularity`	`Granularity`	The granularity for the field, based on the `granularity` prop and current value.
`maxGranularity`	`'year' \| 'month' \| Granularity`	The maximum date or time unit that is displayed in the field.
`isDisabled`	`boolean`	Whether the field is disabled.
`isReadOnly`	`boolean`	Whether the field is read only.
`isRequired`	`boolean`	Whether the field is required.
`realtimeValidation`	`ValidationResult`	Realtime validation results, updated as the user edits the value.
`displayValidation`	`ValidationResult`	Currently displayed validation results, updated when the user commits their changes.

Methods

Method	Description
`setValue( (value: DateValue \| \| null )): void`	Sets the field's value.
`increment( (type: SegmentType )): void`	Increments the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`decrement( (type: SegmentType )): void`	Decrements the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`incrementPage( (type: SegmentType )): void`	Increments the given segment by a larger amount, rounding it to the nearest increment. The amount to increment by depends on the field, for example 15 minutes, 7 days, and 5 years. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`decrementPage( (type: SegmentType )): void`	Decrements the given segment by a larger amount, rounding it to the nearest increment. The amount to decrement by depends on the field, for example 15 minutes, 7 days, and 5 years. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`setSegment( (type: SegmentType, , value: number )): void`	Sets the value of the given segment.
`confirmPlaceholder(): void`	Updates the remaining unfilled segments with the placeholder value.
`clearSegment( (type: SegmentType )): void`	Clears the value of the given segment, reverting it to the placeholder.
`formatValue( (fieldOptions: FieldOptions )): string`	Formats the current date value using the given options.
`getDateFormatter( (locale: string, , formatOptions: FormatterOptions )): DateFormatter`	Gets a formatter based on state's props.
`updateValidation( (result: ValidationResult )): void`	Updates the current validation result. Not displayed to the user until `commitValidation` is called.
`resetValidation(): void`	Resets the displayed validation state to valid when the user resets the form.
`commitValidation(): void`	Commits the realtime validation so it is displayed to the user.

Example#

See the docs for useTimeField in react-aria for an example of useTimeFieldState.

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.

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.

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.

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 milliseconds.

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.

Name	Type	Default	Description
`locale`	`string`	—	The locale to display and edit the value according to.
`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`	`'hour' \| 'minute' \| 'second'`	`'minute'`	Determines the smallest unit that is displayed in the time picker.
`hideTimeZone`	`boolean`	—	Whether to hide the time zone abbreviation.
`shouldForceLeadingZeros`	`boolean`	—	Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
`placeholderValue`	`TimeValue`	—	A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.
`minValue`	`TimeValue \| null`	—	The minimum allowed time that a user may select.
`maxValue`	`TimeValue \| null`	—	The maximum allowed time that a user may select.
`isDisabled`	`boolean`	—	Whether the input is disabled.
`isReadOnly`	`boolean`	—	Whether the input can be selected but not changed by the user.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission.
`isInvalid`	`boolean`	—	Whether the input value is invalid.
`validationBehavior`	`'aria' \| 'native'`	`'aria'`	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
`validate`	`( (value: MappedTimeValue<TimeValue> )) => ValidationError \| true \| null \| undefined`	—	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render.
`onFocus`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent<Target> )) => 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 \| ( (v: ValidationResult )) => ReactNode`	—	An error message for the field.
`value`	`TimeValue \| null`	—	The current value (controlled).
`defaultValue`	`TimeValue \| null`	—	The default value (uncontrolled).
`onChange`	`( (value: MappedTimeValue<TimeValue> \| \| null )) => void`	—	Handler that is called when the value changes.

'valid' | 'invalid'

TimeValue extends ZonedDateTime ? ZonedDateTime :
TimeValue extends CalendarDateTime ? CalendarDateTime :
TimeValue extends Time ? Time : never

string | string[]

BaseEvent<ReactKeyboardEvent<any>>

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

Name	Type	Description
`isInvalid`	`boolean`	Whether the input value is invalid.
`validationErrors`	`string[]`	The current error messages for the input if it is invalid, otherwise an empty array.
`validationDetails`	`ValidityState`	The native validation details for the input.

Properties

Name	Type	Description
`timeValue`	`Time`	The current time value.
`value`	`DateValue \| null`	The current field value.
`dateValue`	`Date`	The current value, converted to a native JavaScript `Date` object.
`calendar`	`Calendar`	The calendar system currently in use.
`segments`	`DateSegment[]`	A list of segments for the current value.
`dateFormatter`	`DateFormatter`	A date formatter configured for the current locale and format.
`isInvalid`	`boolean`	Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props.
`granularity`	`Granularity`	The granularity for the field, based on the `granularity` prop and current value.
`maxGranularity`	`'year' \| 'month' \| Granularity`	The maximum date or time unit that is displayed in the field.
`isDisabled`	`boolean`	Whether the field is disabled.
`isReadOnly`	`boolean`	Whether the field is read only.
`isRequired`	`boolean`	Whether the field is required.
`realtimeValidation`	`ValidationResult`	Realtime validation results, updated as the user edits the value.
`displayValidation`	`ValidationResult`	Currently displayed validation results, updated when the user commits their changes.

Methods

Method	Description
`setValue( (value: DateValue \| \| null )): void`	Sets the field's value.
`increment( (type: SegmentType )): void`	Increments the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`decrement( (type: SegmentType )): void`	Decrements the given segment. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`incrementPage( (type: SegmentType )): void`	Increments the given segment by a larger amount, rounding it to the nearest increment. The amount to increment by depends on the field, for example 15 minutes, 7 days, and 5 years. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`decrementPage( (type: SegmentType )): void`	Decrements the given segment by a larger amount, rounding it to the nearest increment. The amount to decrement by depends on the field, for example 15 minutes, 7 days, and 5 years. Upon reaching the minimum or maximum value, the value wraps around to the opposite limit.
`setSegment( (type: SegmentType, , value: number )): void`	Sets the value of the given segment.
`confirmPlaceholder(): void`	Updates the remaining unfilled segments with the placeholder value.
`clearSegment( (type: SegmentType )): void`	Clears the value of the given segment, reverting it to the placeholder.
`formatValue( (fieldOptions: FieldOptions )): string`	Formats the current date value using the given options.
`getDateFormatter( (locale: string, , formatOptions: FormatterOptions )): DateFormatter`	Gets a formatter based on state's props.
`updateValidation( (result: ValidationResult )): void`	Updates the current validation result. Not displayed to the user until `commitValidation` is called.
`resetValidation(): void`	Resets the displayed validation state to valid when the user resets the form.
`commitValidation(): void`	Commits the realtime validation so it is displayed to the user.

CalendarDate
  | CalendarDateTime
  | ZonedDateTime

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(): this`

Name	Type	Description
`type`	`SegmentType`	The type of segment.
`text`	`string`	The formatted text for the segment.
`isPlaceholder`	`boolean`	Whether the value is a placeholder.
`placeholder`	`string`	A placeholder string for the segment.
`isEditable`	`boolean`	Whether the segment is editable.
`value`	`number`	The numeric value for the segment, if applicable.
`minValue`	`number`	The minimum numeric value for the segment, if applicable.
`maxValue`	`number`	The maximum numeric value for the segment, if applicable.

'era'
  | 'year'
  | 'month'
  | 'day'
  | 'hour'
  | 'minute'
  | 'second'
  | 'dayPeriod'
  | 'literal'
  | 'timeZoneName'

A wrapper around Intl.DateTimeFormat that fixes various browser bugs, and polyfills new features.

Method	Description
`constructor( (locale: string, , options: Intl.DateTimeFormatOptions )): void`
`format( (value: Date )): string`	Formats a date as a string according to the locale and format options passed to the constructor.
`formatToParts( (value: Date )): Intl.DateTimeFormatPart[]`	Formats a date to an array of parts such as separators, numbers, punctuation, and more.
`formatRange( (start: Date, , end: Date )): string`	Formats a date range as a string.
`formatRangeToParts( (start: Date, , end: Date )): DateRangeFormatPart[]`	Formats a date range as an array of parts.
`resolvedOptions(): ResolvedDateTimeFormatOptions`	Returns the resolved formatting options based on the values passed to the constructor.

Name	Type	Description
`source`	`'startRange' \| 'endRange' \| 'shared'`

Name	Type	Description
`hourCycle`	`Intl.DateTimeFormatOptions['hourCycle']`

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

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

Name	Type	Description
`timeZone`	`string`
`hideTimeZone`	`boolean`
`granularity`	`DatePickerProps<any>['granularity']`
`maxGranularity`	`'year' \| 'month' \| DatePickerProps<any>['granularity']`
`hourCycle`	`12 \| 24`
`showEra`	`boolean`
`shouldForceLeadingZeros`	`boolean`

Name	Type	Default	Description
`pageBehavior`	`PageBehavior`	`visible`	Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
`minValue`	`DateValue \| null`	—	The minimum allowed date that a user may select.
`maxValue`	`DateValue \| null`	—	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 \| null`	—	A placeholder date that influences the format of the placeholder shown 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.
`shouldForceLeadingZeros`	`boolean`	—	Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
`isDisabled`	`boolean`	—	Whether the input is disabled.
`isReadOnly`	`boolean`	—	Whether the input can be selected but not changed by the user.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission.
`isInvalid`	`boolean`	—	Whether the input value is invalid.
`validationBehavior`	`'aria' \| 'native'`	`'aria'`	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
`validate`	`( (value: MappedDateValue<DateValue> )) => ValidationError \| true \| null \| undefined`	—	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render.
`onFocus`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent<Target> )) => 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 \| ( (v: ValidationResult )) => 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`	`DateValue \| null`	—	The current value (controlled).
`defaultValue`	`DateValue \| null`	—	The default value (uncontrolled).
`onChange`	`( (value: MappedDateValue<DateValue> \| \| null )) => void`	—	Handler that is called when the value changes.

'single' | 'visible'

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