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>

      

Outline MDB Pro component


          <template>
            <mdb-container>
                <mdb-row>
                  <mdb-col col="6">
                    <mdb-time-picker
                      outline
                      label="outline"
                      @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>
  
        

TimePicker with icon MDB Pro component


          <template>
            <mdb-container>
                <mdb-row>
                  <mdb-col col="6">
                    <mdb-time-picker
                      label="icon"
                      icon="clock"
                      @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>
  
        

Keyboard navigation

Open time picker by pressing Enter key and tab through available options - and press Enter again to select one. To close a modal use Ecs or Enter key (once the time is picked). Use backspace to go back from minutes to hour plate.

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">
outline Boolean false Applies outline style to a component <mdb-date-picker outline />
icon String Adds icon to a datepicker's input <mdb-date-picker icon="clock" />
iconClass String Adds custom class to a datepicker's icon <mdb-date-picker icon="clock" iconClass="yellow-text" />
far Boolean false Changes icon's style to regular <mdb-date-picker icon="paper-plane" far/>
fab Boolean false Changes icon's style to brands <mdb-date-picker icon="..." fab />
fal Boolean false Changes icon's style to light <mdb-date-picker icon="..." fal />

API Reference: Methods

Name Parameters Description Example
@getValue value Returns time-picker value. <mdb-time-picker @getValue="getPickersValue" />
v-on:focus e Emitted on input's native focus event, meaning when the field gains focus. <mdb-date-picker @focus="onFocus" />
v-on:blur e Emitted on input's native blur event, meaning when the field looses focus. <mdb-date-picker @blur="onBlur" />