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.
Create consistent cross-browser and cross-device time picker
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
1<CTimePicker label="Time" locale="en-US" />2<CTimePicker label="Time" locale="en-US" time="02:17:35 PM" />
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" />
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" />
Add the inputReadOnly
boolean attribute to prevent modification of the input's value.
1<CTimePicker inputReadOnly locale="en-US" />
1<CTimePicker />
1<CTimePicker placeholder="入住日期" locale="zh-CN" />
1<CTimePicker placeholder="日付を選択" locale="ja" />
1<CTimePicker placeholder="날짜 선택" locale="ko" />
RTL support is built-in and can be explicitly controlled through the $enable-rtl
variables in scss.
1<CTimePicker placeholder="בחר תאריך" locale="he-IL" />
1<CTimePicker placeholder="تاریخ شروع" locale="fa-IR" />
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};
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CTimePicker style={vars}>...</CTimePicker>
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>");34$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>");89$time-picker-body-padding: $spacer * .5;10$time-picker-roll-col-border-width: 1px;11$time-picker-roll-col-border-color: $border-color;
1import { CTimePicker } from '@coreui/react-pro'2// or3import 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 | - |