Vue Time Picker 2 MDB Pro component

Vue Time Picker 2 - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

This documentation may contain syntax introduced in the MDB Vue 6.7.0 and can be incompatible with previous versions. For old timepicker documentation please follow the link.

Basic examples MDB Pro component 

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

Step MDB Pro component

Step - 15

        
            
          <template>
            <mdb-container>
              <mdb-row>
                <mdb-col col="6">
                  <mdb-time-picker-2 id="timePickerTwo" placeholder="Select your time" label="format: 24h"
                    :hours-format="24" v-model="pickerValue" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker2,
              mdbContainer,
              mdbRow,
              mdbCol
            } from "mdbvue";
            export default {
              name: "TimePickerPage",
              components: {
                mdbTimePicker2,
                mdbContainer,
                mdbRow,
                mdbCol
              },
              data() {
                return {
                  pickerValue: ""
                };
              }
            };
          </script>

Range MDB Pro component

Select time from 10:00am to 09:00pm

        
            
          <template>
            <mdb-container>
              <mdb-row>
                <mdb-col col="6">
                  <mdb-time-picker-2 id="timePickerTwo" placeholder="Select your time" label="format: 24h"
                    :hours-format="24" v-model="pickerValue" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker2,
              mdbContainer,
              mdbRow,
              mdbCol
            } from "mdbvue";
            export default {
              name: "TimePickerPage",
              components: {
                mdbTimePicker2,
                mdbContainer,
                mdbRow,
                mdbCol
              },
              data() {
                return {
                  pickerValue: ""
                };
              }
            };
          </script>

Validation MDB Pro component

Validate Time Picker

        
            
          <template>
            <mdb-container>
              <mdb-row>
                <mdb-col sm="8" md="6">
                  <form @submit.prevent>
                    <mdb-time-picker2 label="Select time between 10:00 and 15:00" :hours-format="24" v-model="picker"
                      min="10:00" max="15:00" :wasValidated="wasValidated" :isValid="isValid"
                      validFeedback="Everything OK" invalidFeedback="Choose another hour!"
                      @getInputValue="handleChange" />
                    <mdb-btn @click="submit" type="submit" class="float-right" color="primary" rounded>Submit</mdb-btn>
                    <mdb-btn @click="wasValidated = false" type="submit" class="float-right" color="primary" rounded>Reset
                    </mdb-btn>
                  </form>
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker2,
              mdbContainer,
              mdbRow,
              mdbCol,
              mdbBtn
            } from "mdbvue";
            export default {
              components: {
                mdbTimePicker2,
                mdbContainer,
                mdbRow,
                mdbCol,
                mdbBtn
              },
              data() {
                return {
                  picker: "",
                  timePickerValue: "",
                  isValid: false,
                  inputValue: "12:00"
                };
              },
              methods: {
                submit() {
                  this.wasValidated = true;
                  this.validate();
                },
                handleChange(e) {
                  this.inputValue = e;
                  this.$nextTick(this.validate);
                },
                validate() {
                  if (this.inputValue === this.picker12 && this.inputValue !== "") {
                    this.isValid = true;
                  } else {
                    this.isValid = false;
                  }
                }
              }
            };
          </script>

Alternative input styling MDB Pro component 

        
            
          <template>
            <mdb-container>
              <mdb-row>
                <mdb-col sm="8" md="6">
                  <mdb-time-picker2 label="Simple input" :outline="false" />
                </mdb-col>
              </mdb-row>
              <mdb-row>
                <mdb-col sm="8" md="6">
                  <mdb-time-picker2 label="Background input" bg />
                </mdb-col>
              </mdb-row>
              <mdb-row>
                <mdb-col sm="8" md="6">
                  <mdb-time-picker2 label="Large input" size="lg"
                    :picker-icon="{ icon: 'clock', class: 'fa-lg', far: true }" />
                </mdb-col>
              </mdb-row>
              <mdb-row>
                <mdb-col sm="8" md="6">
                  <mdb-time-picker2 label="Small input" size="sm"
                    :picker-icon="{ icon: 'clock', class: 'fa-sm', far: true }" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker2,
              mdbContainer,
              mdbRow,
              mdbCol
            } from "mdbvue";
            export default {
              name: "TimePickerPage",
              components: {
                mdbTimePicker2,
                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-2 id="timePickerFour" label="icon" icon="clock" v-model="pickerValue" />
                </mdb-col>
              </mdb-row>
            </mdb-container>
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTimePicker2,
              mdbContainer,
              mdbRow,
              mdbCol
            } from "mdbvue";
            export default {
              name: "TimePickerPage",
              components: {
                mdbTimePicker2,
                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. When the focus is on hours/minuts (header) use up and down arrows to increment values. To close a modal use Ecs. 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-2 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 {
            mdbTimePicker2,
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbBtn
          } from "mdbvue";
          export default {
            name: "TimePickerPage",
            components: {
              mdbTimePicker2,
              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">
textColor String 'text-primary' Changing picker text color <mdb-time-picker text-color="grey-text">
autoClose Boolean false Makes the picker close after minutes are selected <mdb-time-picker auto-close >
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 true Applies outline style to a component <mdb-time-picker-2 outline />
disableInput Boolean The input is not rendered - option for opening time picker with a custom element <mdb-time-picker-2 disable-input />
pickerIcon Object { icon: 'clock' } Changes the picker's icon (available keys: icon, fab, far, fad, fal, class <mdb-time-picker-2 :pickerIcon="{icon: '', fab: true, class: "red-text"}" />
step Number 1 Step for minutes (allowed: 1 or multiples of 5 ) <mdb-time-picker-2 :step="20" />
min String Minimum value <mdb-time-picker-2 min="12:00am" />
max String Maximum value <mdb-time-picker-2 max="12:00am" />
wasValidated Boolean false Adds validation styling <mdb-time-picker-2 :was-validated="true" />
isValid Boolean false Indicates if the selected time is value <mdb-time-picker-2 :was-validated="true" :is-valid="false" />
validFeedback String Displays a validation message (valid) <mdb-time-picker-2 valid-feedback="OK!" />
invalidFeedback String Displays a validation message (invalid) <mdb-time-picker-2 invalid-feedback="OK!" />
bg Boolean false Sets design to animated border with background <mdb-time-picker-2 bg />
icon String Adds icon to a datepicker's input <mdb-time-picker-2 icon="clock" />
iconClass String Adds custom class to a datepicker's icon <mdb-time-picker-2 icon="clock" iconClass="yellow-text" />
far Boolean false Changes icon's style to regular <mdb-time-picker-2 icon="paper-plane" far/>
fab Boolean false Changes icon's style to brands <mdb-time-picker-2 icon="..." fab />
fad Boolean false Changes icon's style to duotone <mdb-time-picker-2 icon="..." fad />
fal Boolean false Changes icon's style to light <mdb-time-picker-2 icon="..." fal />
v-model String '' Stores timePicker value <mdb-time-picker-2 v-model="pickerValue" />
doneLabel String 'Ok' Changes the label of the done button <mdb-time-picker-2 done-label="..." />
clearLabel String 'Ok' Changes the label of the clear button <mdb-time-picker-2 clear-label="..." />
closeLabel String 'Ok' Changes the label of the close button <mdb-time-picker-2 close-label="..." />
hoursAriaLabel String 'Ok' Changes the aria label of the hours buttons <mdb-time-picker-2 hours-aria-label="..." />
minutesAriaLabel String 'Ok' Changes the aria label of the minutes buttons <mdb-time-picker-2 minutes-aria-label="..." />

API Reference: Methods

Name Parameters Description Example
@getValue value Returns time-picker value. <mdb-time-picker @getValue="getPickersValue" />
@focus e Emitted on input's native focus event, meaning when the field gains focus. <mdb-time-picker-2 @focus="onFocus" />
@blur e Emitted on input's native blur event, meaning when the field looses focus. <mdb-time-picker-2 @blur="onBlur" />
@close e Emitted on timePicker close. <mdb-time-picker @close="onClose" />
@getInputValue e Emittes the input's value <mdb-time-picker @getInputValue="handleInputChange" />