Rate this docs

Vue Time Picker MDB Pro component

Vue Time Picker - Bootstrap 4 & Material Design

Vue Bootstrap time picker is a component which allows user to select a time in the Bootstrap form.


Basic examples MDB Pro component



<template>
  <mdb-container>
      <mdb-row>
        <mdb-col col="6">
          <mdb-time-picker
            :id="'timePickerOne'"
            :placeholder="'Select your time'"
            :label="'format: am/pm'"
            :color="'secondary-color'"
            @getValue="getPickerValue"
          />
        </mdb-col>
      </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbTimePicker, mdbContainer, mdbRow, mdbColumn } from 'mdbvue';

export default {
  name: 'TimePickerPage',
  methods: {
    getPickerValue(value) {
      console.log(value);
    }
  },
  components: {
    mdbTimePicker,
    mdbContainer,
    mdbRow,
    mdbColumn
  }
};
</script>

      

24 hour clock MDB Pro component

Set 12 or 24 hour clock.



<template>
  <mdb-container>
      <mdb-row>
        <mdb-col col="6">
          <mdb-time-picker
            :id="'timePickerTwo'"
            :placeholder="'Select your time'"
            :label="'format: 24h'"
            :hoursFormat="24"
            @getValue="getPickerValue"
          />
        </mdb-col>
      </mdb-row>
  </mdb-container>
</template>

<script>
import { mdbTimePicker, mdbContainer, mdbRow, mdbColumn } from 'mdbvue';

export default {
  name: 'TimePickerPage',
  methods: {
    getPickerValue(value) {
      console.log(value);
    }
  },
  components: {
    mdbTimePicker,
    mdbContainer,
    mdbRow,
    mdbColumn
  }
};
</script>

      

Time Picker - API

In this section you will find advanced information about the Time Picker component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


import { mdbTimePicker } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
color String 'primary-color' Changing picker elements color <mdb-time-picker :color="'secondary-color'">
hoursFormat Number 12 Changing picker format <mdb-time-picker :hoursFormat="24">
id String Adding id attribute to the component. <mdb-time-picker :id="'timePickerOne'">
label String Select label. <mdb-time-picker :label="'format: am/pm'">
placeholder String 'Select time' Select placeholder. <mdb-time-picker :placeholder="'Select your time'">

API Reference: Methods

Name Parameters Description Example
@getValue value Returns time-picker value. <mdb-time-picker @getValue="getPickersValue" />