React Time Picker Component API
Time Picker API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Time Picker component and discover how to effectively utilize its props for customization.
CTimePicker#
import { CTimePicker } from '@coreui/react-pro'// orimport CTimePicker from '@coreui/react-pro/src/components/time-picker/CTimePicker'| Property | Default | Type |
|---|---|---|
| ampm#4.8.0+ | auto | boolean, 'auto' |
Set if the component should use the 12/24 hour format. If | ||
| cancelButton# | Cancel | ReactNode |
Toggle visibility or set the content of cancel button. | ||
| cancelButtonColor# | primary | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
Sets the color context of the cancel button to one of CoreUI’s themed colors. | ||
| cancelButtonSize# | sm | 'sm', 'lg' |
Size the cancel button small or large. | ||
| cancelButtonVariant# | ghost | 'outline', 'ghost' |
Set the cancel button variant to an outlined button or a ghost button. | ||
| className# | - | string |
A string of all className you want applied to the component. | ||
| cleaner# | true | ReactNode |
Toggle visibility or set the content of the cleaner button. | ||
| confirmButton# | OK | ReactNode |
Toggle visibility or set the content of confirm button. | ||
| confirmButtonColor# | primary | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
Sets the color context of the confirm button to one of CoreUI’s themed colors. | ||
| confirmButtonSize# | sm | 'sm', 'lg' |
Size the confirm button small or large. | ||
| confirmButtonVariant# | - | 'outline', 'ghost' |
Set the confirm button variant to an outlined button or a ghost button. | ||
| container# | dropdown | 'dropdown', 'inline' |
Set container type for the component. | ||
| disabled# | - | boolean |
Toggle the disabled state for the component. | ||
| dropdownClassNames# | - | string |
A string of all className you want applied to the dropdown menu. | ||
| feedback#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackInvalid#4.2.0+ | - | ReactNode |
Provide valuable, actionable feedback. | ||
| feedbackValid#4.2.0+ | - | ReactNode |
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, | ||
| floatingClassName#4.5.0+ | - | string |
A string of all className you want applied to the floating label wrapper. | ||
| footer# | true | boolean |
Toggle visibility of footer element. | ||
| footerContent# | - | ReactNode |
Add custom elements to the footer. | ||
| hours#5.0.0+ | - | number[], ((hour: number) => number[]) |
Specify a list of available hours using an array, or customize the filtering of hours through a function. | ||
| id#5.3.0+ | - | string |
Set the id attribute for the input element. | ||
| indicator# | true | ReactNode |
Toggle visibility or set the content of the input indicator. | ||
| inputOnChangeDelay#5.0.0+ | 750 | number |
Defines the delay (in milliseconds) for the input field's onChange event. | ||
| inputReadOnly# | - | boolean |
Toggle the readonly state for the component. | ||
| invalid# | - | boolean |
Set component validation state to invalid. | ||
| label#4.2.0+ | - | ReactNode |
Add a caption for a component. | ||
| locale# | default | string |
Sets the default locale for components. If not set, it is inherited from the browser. | ||
| minutes#5.0.0+ | true | boolean, number[], ((minute: number) => number[]) |
Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function. | ||
| name#5.3.0+ | - | string |
Set the name attribute for the input element. | ||
| onHide# | - | () => void |
Callback fired when the component requests to be hidden. | ||
| onShow# | - | () => void |
Callback fired when the component requests to be shown. | ||
| onTimeChange# | - | (timeString: string, localeTimeString?: string, date?: Date) => void |
Callback fired when the time changed. | ||
| placeholder# | Select time | string |
Specifies a short hint that is visible in the input. | ||
| portal#5.9.0+ | false | boolean |
Generates dropdown menu using createPortal. | ||
| required#4.10.0+ | - | boolean |
When present, it specifies that time must be filled out before submitting the form. | ||
| seconds#4.8.0+ | true | boolean, number[], ((second: number) => boolean) |
Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function. | ||
| size# | - | 'sm', 'lg' |
Size the component small or large. | ||
| text#4.2.0+ | - | ReactNode |
Add helper text to the component. | ||
| time# | - | string, Date |
Initial selected time. | ||
| toggler# | - | ReactNode |
The content of toggler. | ||
| tooltipFeedback#4.2.0+ | - | boolean |
Display validation feedback in a styled tooltip. | ||
| valid# | - | boolean |
Set component validation state to valid. | ||
| variant# | roll | 'roll', 'select' |
Set the time picker variant to a roll or select. | ||
| visible# | - | boolean |
Toggle the visibility of dropdown menu component. | ||