React Time Picker Component API

Time Picker API

Explore the API reference for the React Time Picker component and discover how to effectively utilize its props for customization.

On this page

CTimePicker

jsx
import { CTimePicker } from '@coreui/react-pro'
PropertyDefaultType
ampm4.8.0+autoboolean, 'auto', undefined

Set if the component should use the 12/24 hour format. If true forces the interface to a 12-hour format. If false forces the interface into a 24-hour format. If auto the current locale will determine the 12 or 24-hour interface by default locales.

ariaSelectHoursLabelSelect hoursstring, undefined

Accessible label for the hours selection element.

ariaSelectMeridiemLabel5.22.0+Select AM/PMstring, undefined

Accessible label for the AM/PM selection element.

ariaSelectMinutesLabel5.22.0+Select minutesstring, undefined

Accessible label for the minutes selection element.

ariaSelectSecondsLabel5.22.0+Select secondsstring, undefined

Accessible label for the seconds selection element.

cancelButtonCancelReactNode

Toggle visibility or set the content of cancel button.

cancelButtonColorprimary'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the cancel button to one of CoreUI’s themed colors.

cancelButtonSizesm'sm', 'lg', undefined

Size the cancel button small or large.

cancelButtonVariantghost'outline', 'ghost', undefined

Set the cancel button variant to an outlined button or a ghost button.

className5.22.0+-string, undefined

A string of all className you want applied to the component.

cleanertrueReactNode

Toggle visibility or set the content of the cleaner button.

confirmButtonOKReactNode

Toggle visibility or set the content of confirm button.

confirmButtonColorprimary'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string

Sets the color context of the confirm button to one of CoreUI’s themed colors.

confirmButtonSizesm'sm', 'lg', undefined

Size the confirm button small or large.

confirmButtonVariant-'outline', 'ghost', undefined

Set the confirm button variant to an outlined button or a ghost button.

containerdropdown'dropdown', 'inline', undefined

Set container type for the component.

disabled-boolean, undefined

Toggle the disabled state for the component.

dropdownClassNames-string, undefined

A string of all className you want applied to the dropdown menu.

feedback4.2.0+-ReactNode

Provide valuable, actionable feedback.

feedbackInvalid4.2.0+-ReactNode

Provide valuable, actionable feedback.

feedbackValid4.2.0+-ReactNode

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.

floatingClassName4.5.0+-string, undefined

A string of all className you want applied to the floating label wrapper.

Toggle visibility of footer element.

Add custom elements to the footer.

hours5.0.0+-number[], ((hour: number) => number[]), undefined

Specify a list of available hours using an array, or customize the filtering of hours through a function.

id5.3.0+-string, undefined

Set the id attribute for the input element.

indicatortrueReactNode

Toggle visibility or set the content of the input indicator.

inputOnChangeDelay5.0.0+750number, undefined

Defines the delay (in milliseconds) for the input field's onChange event.

inputReadOnly-boolean, undefined

Toggle the readonly state for the component.

invalid-boolean, undefined

Set component validation state to invalid.

label4.2.0+-ReactNode

Add a caption for a component.

localedefaultstring, undefined

Sets the default locale for components. If not set, it is inherited from the browser.

minutes5.0.0+trueboolean, number[], ((minute: number) => number[]), undefined

Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.

name5.3.0+-string, undefined

Set the name attribute for the input element.

onHide-(() => void), undefined

Callback fired when the component requests to be hidden.

onShow-(() => void), undefined

Callback fired when the component requests to be shown.

onTimeChange-((timeString: string | null, localeTimeString?: string | undefined, date?: Date | undefined) => void), undefined

Callback fired when the time changed.

placeholderSelect timestring, undefined

Specifies a short hint that is visible in the input.

portal5.9.0+-boolean, undefined

Generates dropdown menu using createPortal.

required4.10.0+-boolean, undefined

When present, it specifies that time must be filled out before submitting the form.

seconds4.8.0+trueboolean, number[], ((second: number) => number[]), undefined

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', undefined

Size the component small or large.

text4.2.0+-ReactNode

Add helper text to the component.

time-string, Date, null, undefined

Initial selected time.

toggler-ReactNode

The content of toggler.

tooltipFeedback4.2.0+-boolean, undefined

Display validation feedback in a styled tooltip.

valid-boolean, undefined

Set component validation state to valid.

variantroll'roll', 'select', undefined

Set the time picker variant to a roll or select.

visible-boolean, undefined

Toggle the visibility of dropdown menu component.