CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

React Time Picker Component

Create consistent cross-browser and cross-device time picker

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

Example#

1<CTimePicker label="Time" locale="en-US" />
2<CTimePicker label="Time" locale="en-US" time="02:17:35 PM" />

Sizing#

Set heights using size property like size="lg" and size="sm".

1<CTimePicker locale="en-US" size="lg" />
2<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.

1<CTimePicker disabled locale="en-US" />

Readonly#

Add the inputReadOnly boolean attribute to prevent modification of the input's value.

1<CTimePicker inputReadOnly locale="en-US" />

Non-english locale#

Auto#

1<CTimePicker />

Chinese#

1<CTimePicker placeholder="入住日期" locale="zh-CN" />

Japanese#

1<CTimePicker placeholder="日付を選択" locale="ja" />

Korean#

1<CTimePicker placeholder="날짜 선택" locale="ko" />

Right to left support#

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew#

1<CTimePicker placeholder="בחר תאריך" locale="he-IL" />

Persian#

1<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.

1--cui-time-picker-body-padding: #{$time-picker-body-padding};
2--cui-time-picker-roll-col-border: #{$time-picker-roll-col-border-width} solid #{$time-picker-roll-col-border-color};
1--cui-backdrop-zindex: #{$zindex-modal-backdrop};
2--cui-backdrop-bg: #{$modal-backdrop-bg};
3--cui-backdrop-opacity: #{$modal-backdrop-opacity};

How to use CSS variables#

1const vars = {
2 '--my-css-var': 10,
3 '--my-another-css-var': "red"
4}
5return <CTimePicker style={vars}>...</CTimePicker>

SASS variables#

1$time-picker-default-icon-color: $gray-600;
2$time-picker-default-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-default-icon-color}' 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' class='ci-primary'></polygon><path fill='#{$time-picker-default-icon-color}' 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' class='ci-primary'></path></svg>");
3
4$time-picker-cleaner-icon-color: $gray-600;
5$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='#{$time-picker-cleaner-icon-color}' 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' class='ci-primary'></polygon><path fill='#{$time-picker-cleaner-icon-color}' 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' class='ci-primary'></path></svg>");
6$time-picker-cleaner-icon-hover-color: $body-color;
7$time-picker-cleaner-icon-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-hover-color}' 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' class='ci-primary'></polygon><path fill='#{$time-picker-cleaner-icon-hover-color}' 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' class='ci-primary'></path></svg>");
8
9$time-picker-body-padding: $spacer * .5;
10$time-picker-roll-col-border-width: 1px;
11$time-picker-roll-col-border-color: $border-color;

API#

CTimePicker#

1import { CTimePicker } from '@coreui/react-pro'
2// or
3import CTimePicker from '@coreui/react-pro/src/components/time-picker/CTimePicker'
PropertyDescriptionTypeDefault
alignmentSet aligment of dropdown menu.'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}-
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.ReactNode'Cancel'
cancelButtonColorSets the color context of the cancel button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string'primary'
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.ReactNode'OK'
confirmButtonColorSets the color context of the confirm button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string'primary'
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
directionSets a specified direction and location of the dropdown menu.'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'-
disabledToggle the disabled state for the component.boolean-
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 or set the content of footer.ReactNodetrue
footerContentAdd custom elements to the footer.ReactNode-
indicatorToggle visibility or set the content of the input indicator.ReactNodetrue
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
onCancelCallback fired when the cancel button has been clicked.() => void-
onConfirmCallback fired when the confirm button has been clicked.() => void-
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
placementDescribes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'-
popperIf you want to disable dynamic positioning set this property to true.boolean-
seconds
4.8.0+
Show seconds.booleantrue
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-