Rate these 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"
                    @getValue="getPickerValue"
                  />
                </mdb-col>
              </mdb-row>
          </mdb-container>
        </template>
      

        <script>
          import { mdbTimePicker, mdbContainer, mdbRow, mdbCol } from 'mdbvue';
          export default {
            name: 'TimePickerPage',
            methods: {
              getPickerValue(value) {
                console.log(value);
              }
            },
            components: {
              mdbTimePicker,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </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, mdbCol } from 'mdbvue';
          export default {
            name: 'TimePickerPage',
            methods: {
              getPickerValue(value) {
                console.log(value);
              }
            },
            components: {
              mdbTimePicker,
              mdbContainer,
              mdbRow,
              mdbCol
            }
          }
        </script>

      

Note: We can help you build your project.
learn more

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