CoreUI PRO for React.js
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.

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-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-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-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-padding-y-sm: $input-padding-y-sm !default;
$time-picker-padding-x-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-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-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-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'
// or
import CTimePicker from '@coreui/react-pro/src/components/time-picker/CTimePicker'
PropertyDescriptionTypeDefault
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
cancelButtonToggle visibility or set the content of cancel button.ReactNodeCancel
cancelButtonColorSets the color context of the cancel button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringprimary
cancelButtonSizeSize the cancel button small or large.'sm' | 'lg'sm
cancelButtonVariantSet the cancel button variant to an outlined button or a ghost button.'outline' | 'ghost'ghost
classNameA string of all className you want applied to the component.string-
cleanerToggle visibility or set the content of the cleaner button.ReactNodetrue
confirmButtonToggle visibility or set the content of confirm button.ReactNodeOK
confirmButtonColorSets the color context of the confirm button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringprimary
confirmButtonSizeSize the confirm button small or large.'sm' | 'lg'sm
confirmButtonVariantSet the confirm button variant to an outlined button or a ghost button.'outline' | 'ghost'-
containerSet container type for the component.'dropdown' | 'inline'dropdown
disabledToggle the disabled state for the component.boolean-
dropdownClassNamesA 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-
footerToggle visibility of footer element.booleantrue
footerContentAdd 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-
indicatorToggle visibility or set the content of the input indicator.ReactNodetrue
inputOnChangeDelay
5.0.0+
Defines the delay (in milliseconds) for the input field's onChange event.number750
inputReadOnlyToggle the readonly state for the component.boolean-
invalidSet component validation state to invalid.boolean-
label
4.2.0+
Add a caption for a component.ReactNode-
localeSets the default locale for components. If not set, it is inherited from the browser.stringdefault
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-
onHideCallback fired when the component requests to be hidden.() => void-
onShowCallback fired when the component requests to be shown.() => void-
onTimeChangeCallback fired when the time changed.(timeString: string, localeTimeString?: string, date?: Date) => void-
placeholderSpecifies a short hint that is visible in the input.stringSelect time
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
sizeSize the component small or large.'sm' | 'lg'-
text
4.2.0+
Add helper text to the component.ReactNode-
timeInitial selected time.string | Date-
togglerThe content of toggler.ReactNode-
tooltipFeedback
4.2.0+
Display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-
variantSet the time picker variant to a roll or select.'roll' | 'select'roll
visibleToggle the visibility of dropdown menu component.boolean-