Vue Time Picker Component API

Time Picker API

Explore the API reference for the Vue Time Picker component and discover how to effectively utilize its props for customization.

On this page

CTimePicker

jsx
import { CTimePicker } from '@coreui/vue-pro'

Props

PropertyDefaultType
ariaSelectHoursLabel-string

Accessible label for the hours selection element.

ariaSelectMeridiemLabel5.16.0+-string

Accessible label for the AM/PM selection element.

ariaSelectMinutesLabel5.16.0+-string

Accessible label for the minutes selection element.

ariaSelectSecondsLabel5.16.0+-string

Accessible label for the seconds selection element.

ampm4.7.0+'auto'boolean, 'auto'

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.

cancelButton'Cancel'boolean, string

Toggle visibility or set the content of cancel button.

cancelButtonColor'primary'string

Sets the color context of the cancel button to one of CoreUI’s themed colors.

cancelButtonSize'sm'string

Size the cancel button small or large.

cancelButtonVariant'ghost'string

Set the cancel button variant to an outlined button or a ghost button.

cleanertrueboolean

Toggle visibility of the cleaner button.

confirmButton'OK'boolean, string

Toggle visibility or set the content of confirm button.

confirmButtonColor'primary'string

Sets the color context of the confirm button to one of CoreUI’s themed colors.

confirmButtonSize'sm'string

Size the confirm button small or large.

confirmButtonVariant-string

Set the confirm button variant to an outlined button or a ghost button.

container'dropdown'string

Set container type for the component.

disabled-boolean

Toggle the disabled state for the component.

feedback4.6.0+-string

Provide valuable, actionable feedback.

feedbackInvalid4.6.0+-string

Provide valuable, actionable feedback.

feedbackValid4.6.0+-string

Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid.

hours5.0.0+-number[], ((hour: number) => number[])

Specify a list of available hours using an array, or customize the filtering of hours through a function.

id-string

The id global attribute defines an identifier (ID) that must be unique in the whole document.

indicatortrueboolean

Toggle visibility or set the content of the input indicator.

inputOnChangeDelay5.0.0+750number

Defines the delay (in milliseconds) for the input field's onChange event.

inputReadOnly-boolean

Toggle the readonly state for the component.

invalid4.6.0+undefinedboolean

Set component validation state to invalid.

label4.6.0+-string

Add a caption for a component.

locale'default'string

Sets the default locale for components. If not set, it is inherited from the navigator.language.

minutes5.0.0+truenumber[], ((hour: number) => number[]), boolean

Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.

name5.3.0+-string

Set the name attribute for the input element.

placeholder'Select time'string

Specifies a short hint that is visible in the input.

required4.9.0+-boolean

When present, it specifies that must be filled out before submitting the form.

seconds4.7.0+truenumber[], ((hour: number) => number[]), boolean

Toggle the display of seconds, specify a list of available seconds using an array, or customize the filtering of seconds through a function.

sizeundefinedstring

Size the component small or large.

teleport5.8.0+falseboolean

Generates dropdown menu using Teleport.

text4.6.0+-string

Add helper text to the component.

time-date, string

Initial selected time.

tooltipFeedback4.6.0+-boolean

Display validation feedback in a styled tooltip.

valid4.6.0+undefinedboolean

Set component validation state to valid.

variant'roll'string

Set the time picker variant to a roll or select.

visible-boolean

Toggle the visibility of the component.

Events

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