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.

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.

02:17:35 PM
<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 nameDescriptionTypeValuesDefault
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-buttonToggle visibility or set the content of cancel button.boolean|string-'Cancel'
cancel-button-colorSets 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-sizeSize the cancel button small or large.string'sm', 'lg''sm'
cancel-button-variantSet the cancel button variant to an outlined button or a ghost button.string'ghost', 'outline''ghost'
cleanerToggle visibility of the cleaner button.boolean-true
confirm-buttonToggle visibility or set the content of confirm button.boolean|string-'OK'
confirm-button-colorSets 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-sizeSize the confirm button small or large.string'sm', 'lg''sm'
confirm-button-variantSet 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--
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.string--
indicatorToggle visibility or set the content of the input indicator.boolean-true
input-read-onlyToggle 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--
localeSets the default locale for components. If not set, it is inherited from the navigator.language.string--
placeholderSpecifies 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
sizeSize the component small or large.string'sm', 'lg'-
text
4.6.0+
Add helper text to the component.string--
timeInitial 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--
variantSet the time picker variant to a roll or select.string'roll', 'select''roll'
visibleToggle the visibility of the component.boolean--

Events

Event nameDescriptionProperties
changeCallback fired when the time changed.
hideCallback fired when the component requests to be hidden.
showCallback fired when the component requests to be shown.
update:timeCallback fired when the time changed.