Time Input
––
AM
––
––
AM
––
––
––
AM
The TimeInput component consists of a label, and a group of segments representing each unit of a time (e.g. hours, minutes, and seconds). Each segment is individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or time format, and offers an easy and error-free way to edit times using the keyboard.
API Reference
TimeInput Props
| Property | Type | Description | Default |
|---|---|---|---|
| label | ReactNode | The content to display as the label. | - |
| value | DateValue | The current value of the date input (controlled). | - |
| defaultValue | DateValue | The default value of the date input (uncontrolled). | - |
| placeholderValue | DateValue | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults current date at midnight. | - |
| minValue | DateValue | The minimum allowed date that a user may select. | - |
| maxValue | DateValue | The maximum allowed date that a user may select. | - |
| locale | string | The locale to display and edit the value according to. | - |
| description | ReactNode | A description for the date input. Provides a hint such as specific requirements for what to choose. | - |
| errorMessage | ReactNode | (v: ValidationResult) => ReactNode | An error message for the date input. | - |
| startContent | ReactNode | Element to be rendered in the left side of the date input. | - |
| endContent | ReactNode | Element to be rendered in the right side of the date input. | - |
| isRequired | boolean | Whether user input is required on the input before form submission. | false |
| isReadOnly | boolean | Whether the input can be selected but not changed by the user. | - |
| isDisabled | boolean | Whether the input is disabled. | false |
| isInvalid | boolean | Whether the input value is invalid. | false |
| createCalendar | (name: string) => Calendar | A function that creates a Calendar object for a given calendar identifier. | - |
| isDateUnavailable | (date: DateValue) => boolean | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - |
| autoFocus | boolean | Whether the element should receive focus on render. | false |
| hourCycle | 12 | 24 | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale. | - |
| granularity | hour | minute | second | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates. | - |
| hideTimeZone | boolean | Whether to hide the time zone abbreviation. | false |
| shouldForceLeadingZeros | boolean | Whether to always show leading zeros in the month, day, and hour fields. | true |
| classNames | InputClassNames | ClassName for each components in the Input | - |
| styles | InputStyles | Styles for each components in the Input | - |
TimeInput Events
| Attribute | Type | Description |
|---|---|---|
| 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. |
| onChange | (value: MappedTimeValue<TimeValue>) => void | Handler that is called when the value changes. |
Usage
To use the TimeInput component, import it from the library and include it in your JSX code:
import { TimeInput } from 'react-calendar-kit';
<TimeInput />;