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#

Time

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'

Property	Description	Type	Default
alignment	Set 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
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
direction	Sets a specified direction and location of the dropdown menu.	`'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'`	-
disabled	Toggle 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`	-
footer	Toggle visibility of footer element or set the content of footer.	`ReactNode`	true
footerContent	Add custom elements to the footer.	`ReactNode`	-
indicator	Toggle visibility or set the content of the input indicator.	`ReactNode`	true
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
onCancel	Callback fired when the cancel button has been clicked.	`() => void`	-
onConfirm	Callback fired when the confirm button has been clicked.	`() => void`	-
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
placement	Describes 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'`	-
popper	If you want to disable dynamic positioning set this property to `true`.	`boolean`	-
portal 4.8.0+	Generates dropdown menu using createPortal.	`boolean`	-
required 4.10.0+	When present, it specifies that time must be filled out before submitting the form.	`boolean`	-
seconds 4.8.0+	Show seconds.	`boolean`	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`	-

On this page

CoreUI for React is Open Source UI Components Library for React.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.