Vue 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 React components. To learn more please visit the following pages.
Example
<CTimePicker label="Time" locale="en-US" />
<CTimePicker label="Time" locale="en-US" time="02:17:35 PM" />
vModel
By default, <CTimePicker>
returns time
as a Date.prototype.toLocaleTimeString()
. If no date is selected, <CTimePicker>
returns null
.
<template>
<CTimePicker label="Time" locale="en-US" v-model:time="vTime" />
<div>{{ vTime }}</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const vTime = ref('02:17:35 PM')
return {
vTime
}
}
}
</script>
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" />
Non-english locale
Auto
<CTimePicker />
Chinese
<CTimePicker placeholder="入住日期" locale="zh-CN" />
Japanese
<CTimePicker placeholder="日付を選択" locale="ja" />
Korean
<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
<CTimePicker placeholder="בחר תאריך" locale="he-IL" />
Persian
<CTimePicker placeholder="تاریخ شروع" locale="fa-IR" />
Customizing
CSS variables
Vue 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-body-padding: #{$time-picker-body-padding};
--cui-time-picker-roll-col-border: #{$time-picker-roll-col-border-width} solid #{$time-picker-roll-col-border-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-default-icon-color: $gray-600 !default;
$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>") !default;
$time-picker-invalid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-invalid-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='#{$form-feedback-invalid-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>") !default;
$time-picker-valid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-valid-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='#{$form-feedback-valid-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>") !default;
$time-picker-cleaner-icon-color: $gray-600 !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='#{$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>") !default;
$time-picker-cleaner-icon-hover-color: $body-color !default;
$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>") !default;
$time-picker-body-padding: $spacer * .5 !default;
$time-picker-roll-col-border-width: 1px !default;
$time-picker-roll-col-border-color: $border-color !default;
API
CTimePicker
import { CTimePicker } from '@coreui/vue-pro'
// or
import CTimePicker from '@coreui/vue-pro/src/components/time-picker/CTimePicker'
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
ampm 4.7.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|string | - | 'auto' |
cancel-button | Toggle visibility or set the content of cancel button. | boolean|string | - | 'Cancel' |
cancel-button-color | Sets the color context of the cancel button to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' | 'primary' |
cancel-button-size | Size the cancel button small or large. | string | 'sm' , 'lg' | 'sm' |
cancel-button-variant | Set the cancel button variant to an outlined button or a ghost button. | string | 'ghost' , 'outline' | 'ghost' |
cleaner | Toggle visibility of the cleaner button. | boolean | - | true |
confirm-button | Toggle visibility or set the content of confirm button. | boolean|string | - | 'OK' |
confirm-button-color | Sets the color context of the confirm button to one of CoreUI’s themed colors. | string | 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' | 'primary' |
confirm-button-size | Size the confirm button small or large. | string | 'sm' , 'lg' | 'sm' |
confirm-button-variant | Set the confirm button variant to an outlined button or a ghost button. | string | 'ghost' , 'outline' | - |
feedback 4.6.0+ | Provide valuable, actionable feedback. | string | - | - |
feedback-invalid 4.6.0+ | Provide valuable, actionable feedback. | string | - | - |
feedback-valid 4.6.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid . | string | - | - |
id | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | - |
indicator | Toggle visibility or set the content of the input indicator. | boolean | - | true |
input-read-only | Toggle the readonly state for the component. | boolean | - | - |
invalid 4.6.0+ | Set component validation state to invalid. | boolean | - | - |
label 4.6.0+ | Add a caption for a component. | string | - | - |
locale | Sets the default locale for components. If not set, it is inherited from the navigator.language. | string | - | - |
placeholder | Specifies a short hint that is visible in the input. | string | - | 'Select time' |
required 4.9.0+ | When present, it specifies that must be filled out before submitting the form. | boolean | - | - |
seconds 4.7.0+ | Show seconds. | boolean | - | true |
size | Size the component small or large. | string | 'sm' , 'lg' | - |
text 4.6.0+ | Add helper text to the component. | string | - | - |
time | Initial selected time. | date|string | - | - |
tooltip-feedback 4.6.0+ | Display validation feedback in a styled tooltip. | boolean | - | - |
valid 4.6.0+ | Set component validation state to valid. | boolean | - | - |
variant | Set the time picker variant to a roll or select. | string | 'roll' , 'select' | 'roll' |
visible | Toggle the visibility of the component. | boolean | - | - |
Events
Event name | Description | Properties |
---|---|---|
change | Callback fired when the time changed. | |
hide | Callback fired when the component requests to be hidden. | |
show | Callback fired when the component requests to be shown. | |
update:time | Callback fired when the time changed. |