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

The time picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop. 

        
            
          <template>
            <mdb-container>
              <mdb-row>
                <mdb-col col="6">
                  <mdb-time-picker id="timePickerOne" placeholder="Select your time" label="format: am/pm"
                    v-model="pickerValue" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker,
              mdbContainer,
              mdbRow,
              mdbCol
            } from 'mdbvue';
            export default {
              name: 'TimePickerPage',
              components: {
                mdbTimePicker,
                mdbContainer,
                mdbRow,
                mdbCol
              },
              data() {
                return {
                  pickerValue: ''
                }
              }
            }
          </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"
                    :hours-format="24" v-model="pickerValue" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker,
              mdbContainer,
              mdbRow,
              mdbCol
            } from 'mdbvue';
            export default {
              name: 'TimePickerPage',
              components: {
                mdbTimePicker,
                mdbContainer,
                mdbRow,
                mdbCol
              },
              data() {
                return {
                  pickerValue: ''
                }
              }
            }
          </script>

Outline MDB Pro component 

        
            
          <template>
            <mdb-container>
              <mdb-row>
                <mdb-col col="6">
                  <mdb-time-picker id="timePickerThree" outline label="outline" v-model="pickerValue" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker,
              mdbContainer,
              mdbRow,
              mdbCol
            } from 'mdbvue';
            export default {
              name: 'TimePickerPage',
              components: {
                mdbTimePicker,
                mdbContainer,
                mdbRow,
                mdbCol
              },
              data() {
                return {
                  pickerValue: ''
                }
              }
            }
          </script>

TimePicker with icon MDB Pro component 

        
            
          <template>
            <mdb-container>
              <mdb-row>
                <mdb-col col="6">
                  <mdb-time-picker id="timePickerFour" label="icon" icon="clock" v-model="pickerValue" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker,
              mdbContainer,
              mdbRow,
              mdbCol
            } from 'mdbvue';
            export default {
              name: 'TimePickerPage',
              components: {
                mdbTimePicker,
                mdbContainer,
                mdbRow,
                mdbCol
              },
              data() {
                return {
                  pickerValue: ''
                }
              }
            }
          </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.

Default value

To set the default value just use v-model directive and set date as a value.

Access from outside 

        
            
        <template>
          <mdb-container>
            <mdb-row>
              <mdb-col col="6">
                <mdb-time-picker label="outside access" ref="picker" v-model="pickerValue" />
                <mdb-btn size="sm" @click.native="$refs.picker.open()">Open Picker</mdb-btn>
                <mdb-btn size="sm" @click.native="$refs.picker.clear()">Clear Picker</mdb-btn>
              </mdb-col>
            </mdb-row>
          </mdb-container>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbTimePicker,
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbBtn
          } from 'mdbvue';
          export default {
            name: 'TimePickerPage',
            components: {
              mdbTimePicker,
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbBtn
            },
            data() {
              return {
                pickerValue: ''
              }
            }
          }
        </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

        
            
    <script>
      import {
        mdbTimePicker
      } from 'mdbvue';
    </script>

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 />
bg Boolean false Sets design to animated border with background <mdb-date-picker bg />
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 />
v-model String '' Stores timePicker value <mdb-date-picker v-model="pickerValue" />

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" />
v-on:close e Emitted on timePicker close. <mdb-time-picker @close="onClose" />