Bootstrap Time Picker Premium component

Vue Timepicker is a component that allows user to select in a clean and direct manner. The components accepts many props, making it highly customizable.

Basic example

  <time-picker color="blue" v-model="picker"></time-picker>

import {  TimePicker, Container } from 'mdbvue'
    export default {
      name: 'Example',
      components: {
      data() {
        return {
          picker: null


Name Default Type Description
allowed-hours null Function restricts which hours can be selected
allowed-minutes null Function restricts which minutes can be selected
color undefined String applies specified color to the control
format false String available options are 'ampm' and '24hr'
header-color undefined String defines the header color. If not specified it will use the color defined by color prop or the default picker color
landscape false Boolean orients picker horizontally
max undefined String specifies maximum allowed time
min undefined String specifies minimum allowed time
no-title false Boolean hides the picker's title bar
scrollable false Boolean allows changing hour/minute with mouse scroll
width 290 Number controls picker's width