This Component is a part of CoreUI PRO for React.js, an advanced UI library offering over 100 components designed for creating responsive, sleek, and powerful applications. Experience it yourself by signing up for a complimentary 7-day trial.
React Time Picker Component
Time Picker
React Time Picker is a customizable and user-friendly tool for selecting times in forms. It supports various locales, sizes, and states to enhance the user experience.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
On this page
Example#
To create a basic React Time Picker, use:
<CTimePicker label="Time" locale="en-US" /><CTimePicker label="Time" locale="en-US" time="02:17:35 PM" />Sizing#
Set heights using size property like size="lg" and size="sm".
<CTimePicker locale="en-US" size="lg" /><CTimePicker locale="en-US" size="sm" />Disabled#
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
<CTimePicker disabled locale="en-US" />Readonly#
Add the inputReadOnly boolean attribute to prevent modification of the input's value.
<CTimePicker inputReadOnly locale="en-US" />Custom formats#
Disable minutes and seconds#
Customize React Time Picker to display only hours, or hours and minutes by disabling minutes/seconds.
<CTimePicker label="Only hours and minutes" locale="en-US" seconds={false} /><CTimePicker label="Only hours" locale="en-US" minutes={false} seconds={false} />Custom hours, minutes and seconds#
Tailor the React Time Picker to your needs by specifying custom values for hours, minutes, and seconds. Use arrays to define selectable options or functions for dynamic filtering. The example below demonstrates setting specific hour options, minute intervals, and a condition for seconds only to include values less than 20.
<CTimePicker locale="en-US" hours={[1, 3, 5, 7]} minutes={[0, 15, 30, 45]} seconds={(s) => s < 20} />In this configuration, the React TimePicker restricts hours to a predefined set, minutes to quarter intervals, and seconds to values under 20, offering a high degree of customization for precise time selection scenarios.
Non-english locale#
Tailor the React Time Picker to match different locales, offering an inclusive user experience across diverse languages. Automatically adapt or set specific locales to meet your application's needs.
Auto#
Our Time Picker compoennt automatically detects and adapts to the user's locale, ensuring a localized experience without explicit configuration.
<CTimePicker />Chinese#
Specify the locale to Chinese (zh-CN) for users in China, enhancing usability with a familiar format and language.
<CTimePicker placeholder="入住日期" locale="zh-CN" />Japanese#
Set the Time Picker's locale to Japanese (ja) to cater to Japanese users, presenting date and time in a localized format.
<CTimePicker placeholder="日付を選択" locale="ja" />Korean#
Configure the locale to Korean (ko) for a tailored experience in Korea, offering date and time selection in the local language.
<CTimePicker placeholder="날짜 선택" locale="ko" />This approach ensures that our React TimePicker component is versatile and adaptable, providing a seamless and intuitive interface for users worldwide.
Right to left support#
RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.
Hebrew#
Optimize the Time Picker for Hebrew-speaking users with RTL layout. Set the locale to Hebrew (he-IL) and apply RTL direction to align with Hebrew script.
<CTimePicker placeholder="בחר תאריך" locale="he-IL" />Persian#
Adapt the Time Picker for Persian-speaking audiences by enabling RTL layout. Customize the locale to Persian (fa-IR) and utilize RTL directionality for seamless integration.
<CTimePicker placeholder="تاریخ شروع" locale="fa-IR" />Customizing#
CSS variables#
React time pickers use local CSS variables on .time-picker for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--cui-time-picker-zindex: #{$time-picker-zindex};--cui-time-picker-font-family: #{$time-picker-font-family};--cui-time-picker-font-size: #{$time-picker-font-size};--cui-time-picker-font-weight: #{$time-picker-font-weight};--cui-time-picker-line-height: #{$time-picker-line-height};--cui-time-picker-color: #{$time-picker-color};--cui-time-picker-bg: #{$time-picker-bg};--cui-time-picker-box-shadow: #{$time-picker-box-shadow};--cui-time-picker-border-width: #{$time-picker-border-width};--cui-time-picker-border-color: #{$time-picker-border-color};--cui-time-picker-border-radius: #{$time-picker-border-radius};--cui-time-picker-disabled-color: #{$time-picker-disabled-color};--cui-time-picker-disabled-bg: #{$time-picker-disabled-bg};--cui-time-picker-disabled-border-color: #{$time-picker-disabled-border-color};--cui-time-picker-focus-color: #{$time-picker-focus-color};--cui-time-picker-focus-bg: #{$time-picker-focus-bg};--cui-time-picker-focus-border-color: #{$time-picker-focus-border-color};--cui-time-picker-focus-box-shadow: #{$time-picker-focus-box-shadow};--cui-time-picker-placeholder-color: #{$time-picker-placeholder-color};--cui-time-picker-padding-y: #{$time-picker-padding-y};--cui-time-picker-padding-x: #{$time-picker-padding-x};--cui-time-picker-gap: #{$time-picker-gap};--cui-time-picker-indicator-width: #{$time-picker-indicator-width};--cui-time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon)};--cui-time-picker-indicator-icon-color: #{$time-picker-indicator-icon-color};--cui-time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size};--cui-time-picker-cleaner-width: #{$time-picker-cleaner-width};--cui-time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon)};--cui-time-picker-cleaner-icon-color: #{$time-picker-cleaner-icon-color};--cui-time-picker-cleaner-icon-hover-color: #{$time-picker-cleaner-icon-hover-color};--cui-time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size};--cui-time-picker-body-padding: #{$time-picker-body-padding};--cui-time-picker-footer-border-width: #{$time-picker-footer-border-width};--cui-time-picker-footer-border-color: #{$time-picker-footer-border-color};--cui-time-picker-footer-padding: #{$time-picker-footer-padding};--cui-time-picker-dropdown-bg: #{$time-picker-dropdown-bg};--cui-time-picker-dropdown-border-width: #{$time-picker-dropdown-border-width};--cui-time-picker-dropdown-border-color: #{$time-picker-dropdown-border-color};--cui-time-picker-dropdown-border-radius: #{$time-picker-dropdown-border-radius};--cui-time-picker-dropdown-box-shadow: #{$time-picker-dropdown-box-shadow};--cui-time-picker-roll-col-border-width: #{$time-picker-roll-col-border-width};--cui-time-picker-roll-col-border-color: #{$time-picker-roll-col-border-color};--cui-time-picker-roll-cell-selected-color: #{$time-picker-roll-cell-selected-color};--cui-time-picker-roll-cell-selected-bg: #{$time-picker-roll-cell-selected-bg};--cui-time-picker-inline-select-font-size: #{$time-picker-inline-select-font-size};--cui-time-picker-inline-select-color: #{$time-picker-inline-select-color};--cui-time-picker-inline-select-padding-y: #{$time-picker-inline-select-padding-y};--cui-time-picker-inline-select-padding-x: #{$time-picker-inline-select-padding-x};--cui-time-picker-inline-select-disabled-color: #{$time-picker-inline-select-disabled-color};How to use CSS variables#
const vars = { '--my-css-var': 10, '--my-another-css-var': "red" }return <CTimePicker style={vars}>...</CTimePicker>SASS variables#
$time-picker-zindex: 1000 !default;$time-picker-font-family: $input-font-family !default;$time-picker-font-size: $input-font-size !default;$time-picker-font-size-sm: $input-font-size-sm !default;$time-picker-font-size-lg: $input-font-size-lg !default;$time-picker-font-weight: $input-font-weight !default;$time-picker-line-height: $input-line-height !default;$time-picker-color: $input-color !default;$time-picker-bg: $input-bg !default;$time-picker-box-shadow: $box-shadow-inset !default;
$time-picker-border-width: $input-border-width !default;$time-picker-border-color: $input-border-color !default;$time-picker-border-radius: $input-border-radius !default;$time-picker-border-radius-sm: $input-border-radius-sm !default;$time-picker-border-radius-lg: $input-border-radius-lg !default;
$time-picker-invalid-border-color: var(--cui-form-invalid-border-color) !default;$time-picker-valid-border-color: var(--cui-form-valid-border-color) !default;
$time-picker-disabled-color: $input-disabled-color !default;$time-picker-disabled-bg: $input-disabled-bg !default;$time-picker-disabled-border-color: $input-disabled-border-color !default;
$time-picker-focus-color: $input-focus-color !default;$time-picker-focus-bg: $input-focus-bg !default;$time-picker-focus-border-color: $input-focus-border-color !default;$time-picker-focus-box-shadow: $input-btn-focus-box-shadow !default;
$time-picker-placeholder-color: var(--cui-secondary-color) !default;
$time-picker-padding-y: $input-padding-y !default;$time-picker-padding-x: $input-padding-x !default;$time-picker-gap: $input-padding-x !default;
$time-picker-padding-y-sm: $input-padding-y-sm !default;$time-picker-padding-x-sm: $input-padding-x-sm !default;$time-picker-gap-sm: $input-padding-x-sm !default;
$time-picker-padding-y-lg: $input-padding-y-lg !default;$time-picker-padding-x-lg: $input-padding-x-lg !default;$time-picker-gap-lg: $input-padding-x-lg !default;
$time-picker-cleaner-width: 1.25rem !default;$time-picker-cleaner-icon-color: var(--cui-tertiary-color) !default;$time-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#000' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;$time-picker-cleaner-icon-hover-color: var(--cui-body-color) !default;$time-picker-cleaner-icon-size: 1rem !default;$time-picker-cleaner-icon-size-sm: .875rem !default;$time-picker-cleaner-icon-size-lg: 1.25rem !default;
$time-picker-cleaner-width-sm: 1rem !default;$time-picker-cleaner-width-lg: 1.5rem !default;$time-picker-cleaner-icon-size-sm: .875rem !default;$time-picker-cleaner-icon-size-lg: 1.25rem !default;
$time-picker-indicator-width: 1.25rem !default;$time-picker-indicator-icon-color: var(--cui-tertiary-color) !default;$time-picker-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#000' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;$time-picker-indicator-invalid-icon-color: var(--cui-form-invalid-color) !default;$time-picker-indicator-invalid-icon: $time-picker-indicator-icon !default;$time-picker-indicator-valid-icon-color: var(--cui-form-valid-color) !default;$time-picker-indicator-valid-icon: $time-picker-indicator-icon !default;$time-picker-indicator-icon-size: 1rem !default;
$time-picker-indicator-width-sm: 1rem !default;$time-picker-indicator-width-lg: 1.5rem !default;$time-picker-indicator-icon-size-sm: .875rem !default;$time-picker-indicator-icon-size-lg: 1.25rem !default;
$time-picker-dropdown-bg: var(--cui-body-bg) !default;$time-picker-dropdown-border-color: var(--cui-border-color) !default;$time-picker-dropdown-border-width: var(--cui-border-width) !default;$time-picker-dropdown-border-radius: var(--cui-border-radius) !default;$time-picker-dropdown-box-shadow: var(--cui-box-shadow) !default;
$time-picker-body-padding: $spacer * .5 !default;
$time-picker-footer-padding: .5rem !default;$time-picker-footer-border-width: 1px !default;$time-picker-footer-border-color: var(--cui-border-color) !default;
$time-picker-roll-col-border-width: var(--cui-border-width) !default;$time-picker-roll-col-border-color: var(--cui-border-color) !default;$time-picker-roll-cell-selected-color: var(--cui-white) !default;$time-picker-roll-cell-selected-bg: var(--cui-primary) !default;
$time-picker-inline-select-font-size: $form-select-font-size-sm !default;$time-picker-inline-select-color: $input-color !default;$time-picker-inline-select-padding-y: $input-padding-y-sm !default;$time-picker-inline-select-padding-x: $input-padding-x-sm !default;$time-picker-inline-select-disabled-color: $input-disabled-color !default;API#
CTimePicker#
import { CTimePicker } from '@coreui/react-pro'// orimport CTimePicker from '@coreui/react-pro/src/components/time-picker/CTimePicker'| Property | Description | Type | Default |
|---|---|---|---|
| ampm 4.8.0+ | 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. | boolean | 'auto' | auto |
| cancelButton | Toggle visibility or set the content of cancel button. | ReactNode | Cancel |
| cancelButtonColor | Sets the color context of the cancel button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | primary |
| cancelButtonSize | Size the cancel button small or large. | 'sm' | 'lg' | sm |
| cancelButtonVariant | Set the cancel button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | ghost |
| className | A string of all className you want applied to the component. | string | - |
| cleaner | Toggle visibility or set the content of the cleaner button. | ReactNode | true |
| confirmButton | Toggle visibility or set the content of confirm button. | ReactNode | OK |
| confirmButtonColor | Sets the color context of the confirm button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | primary |
| confirmButtonSize | Size the confirm button small or large. | 'sm' | 'lg' | sm |
| confirmButtonVariant | Set the confirm button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | - |
| container | Set container type for the component. | 'dropdown' | 'inline' | dropdown |
| disabled | Toggle the disabled state for the component. | boolean | - |
| dropdownClassNames | A string of all className you want applied to the dropdown menu. | string | - |
| feedback 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackInvalid 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackValid 4.2.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. | ReactNode | - |
| floatingClassName 4.5.0+ | A string of all className you want applied to the floating label wrapper. | string | - |
| footer | Toggle visibility of footer element. | boolean | true |
| footerContent | Add custom elements to the footer. | ReactNode | - |
| hours 5.0.0+ | Specify a list of available hours using an array, or customize the filtering of hours through a function. | number[] | ((hour: number) => number[]) | - |
| id 5.3.0+ | Set the id attribute for the input element. | string | - |
| indicator | Toggle visibility or set the content of the input indicator. | ReactNode | true |
| inputOnChangeDelay 5.0.0+ | Defines the delay (in milliseconds) for the input field's onChange event. | number | 750 |
| inputReadOnly | Toggle the readonly state for the component. | boolean | - |
| invalid | Set component validation state to invalid. | boolean | - |
| label 4.2.0+ | Add a caption for a component. | ReactNode | - |
| locale | Sets the default locale for components. If not set, it is inherited from the browser. | string | default |
| minutes 5.0.0+ | Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function. | boolean | number[] | ((minute: number) => number[]) | true |
| name 5.3.0+ | Set the name attribute for the input element. | string | - |
| onHide | Callback fired when the component requests to be hidden. | () => void | - |
| onShow | Callback fired when the component requests to be shown. | () => void | - |
| onTimeChange | Callback fired when the time changed. | (timeString: string, localeTimeString?: string, date?: Date) => void | - |
| placeholder | Specifies a short hint that is visible in the input. | string | Select time |
| portal 5.9.0+ | Generates dropdown menu using createPortal. | boolean | false |
| required 4.10.0+ | When present, it specifies that time must be filled out before submitting the form. | boolean | - |
| seconds 4.8.0+ | Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function. | boolean | number[] | ((second: number) => number[]) | true |
| size | Size the component small or large. | 'sm' | 'lg' | - |
| text 4.2.0+ | Add helper text to the component. | ReactNode | - |
| time | Initial selected time. | string | Date | - |
| toggler | The content of toggler. | ReactNode | - |
| tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
| valid | Set component validation state to valid. | boolean | - |
| variant | Set the time picker variant to a roll or select. | 'roll' | 'select' | roll |
| visible | Toggle the visibility of dropdown menu component. | boolean | - |