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

Time

<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.

Time

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};

--cui-backdrop-zindex: #{$zindex-modal-backdrop};
--cui-backdrop-bg: #{$modal-backdrop-bg};
--cui-backdrop-opacity: #{$modal-backdrop-opacity};

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;
$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;

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'
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.

CoreUI PRO Component

Vue Time Picker Component

Other frameworks

Example #

vModel #

Sizing #

Disabled #

Readonly #

Non-english locale #

Auto #

Chinese #

Japanese #

Korean #

Right to left support #

Hebrew #

Persian #

Customizing #

CSS variables #

How to use CSS variables #

SASS variables #

API #

CTimePicker #

Props #

Events #