CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

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.

  • Angular Time Picker
  • Bootstrap Time Picker
  • React Time Picker

Example #

<CTimePicker label="Time" locale="en-US" />
<CTimePicker label="Time" locale="en-US" time="02:17:35 PM" />
1
2

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Sizing #

Set heights using size property like size="lg" and size="sm".

<CTimePicker locale="en-US" size="lg" />
<CTimePicker locale="en-US" size="sm" />
1
2

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" />
1

Readonly #

Add the inputReadOnly boolean attribute to prevent modification of the input's value.

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

Non-english locale #

Auto #

<CTimePicker />
1

Chinese #

<CTimePicker placeholder="入住日期" locale="zh-CN" />
1

Japanese #

<CTimePicker placeholder="日付を選択" locale="ja" />
1

Korean #

<CTimePicker placeholder="날짜 선택" locale="ko" />
1

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" />
1

Persian #

<CTimePicker placeholder="تاریخ شروع" locale="fa-IR" />
1

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};
1
2
--cui-backdrop-zindex: #{$zindex-modal-backdrop};
--cui-backdrop-bg: #{$modal-backdrop-bg};
--cui-backdrop-opacity: #{$modal-backdrop-opacity};
1
2
3

How to use CSS variables #

const vars = { 
  '--my-css-var': 10,
  '--my-another-css-var': "red" 
}
return <CTimePicker :style="vars">...</CTimePicker>
1
2
3
4
5

SASS variables #

$time-picker-default-icon-color:       $gray-600;
$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>");

$time-picker-cleaner-icon-color:       $gray-600;
$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>");
$time-picker-cleaner-icon-hover-color: $body-color;
$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>");

$time-picker-body-padding:             $spacer * .5;
$time-picker-roll-col-border-width:    1px;
$time-picker-roll-col-border-color:    $border-color;
1
2
3
4
5
6
7
8
9
10
11

API #

CTimePicker #

import { CTimePicker } from '@coreui/vue-pro'
// or
import CTimePicker from '@coreui/vue-pro/src/components/time-picker/CTimePicker'
1
2
3

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'
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.
On this page
  • Example
    • vModel
  • Sizing
  • Disabled
  • Readonly
  • Non-english locale
    • Auto
    • Chinese
    • Japanese
    • Korean
  • Right to left support
    • Hebrew
    • Persian
  • Customizing
    • CSS variables
    • SASS variables
  • API
    • CTimePicker
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

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

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