Date Input
mm
dd
yyyy
mm
dd
yyyy
––
AM
mm
dd
yyyy
––
––
AM
mm
dd
yyyy
––
––
––
AM
DateInput is a component that allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
API Reference
DateInput Props
| Property | Type | Description | Default |
|---|---|---|---|
| label | ReactNode | CalendarDate | CalendarDateTime | undefined| null | The content to display as the label. | - |
| value | DateValue | The current value of the date input (controlled). | - |
| defaultValue | string | undefined | 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. | - |
| 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 | day | 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 | - |
DateInput 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 DateInput component, import it from the library and include it in your JSX code:
import { DateInput } from 'react-calendar-kit';
<DateInput />;