Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

React Time Picker Component

Create consistent cross-browser and cross-device time picker

Example#

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

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'}-
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.'dropup' | 'dropend' | 'dropstart'-
disabledToggle the disabled state for the component.boolean-
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-
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-
sizeSize the component small or large.'sm' | 'lg'-
timeInitial selected time.string | Date-
togglerThe content of toggler.ReactNode-
variantSet the time picker variant to a roll or select.'roll' | 'select'roll
visibleToggle the visibility of dropdown menu component.boolean-