Vue Date Picker MDB Pro component

Vue Date Picker - 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 date picker is a plugin that adds a function of selecting date in a user-friendly way.

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

Basic example MDB Pro component 

        
            
              <template>
                <mdb-date-picker-2 v-model="date" label="Basic example" title="Select date" />
              </template>
            
        
    
        
            
              <script>
                import { mdbDatePicker2 } from 'mdbvue';
                export default {
                  name: 'Example',
                  components: {
                    mdbDatePicker2
                  },
                  data() {
                    return {
                      date: ''
                    };
                  }
                }
              </script>

Inline example MDB Pro component 

        
            
              <template>
                <mdb-date-picker-2 inline v-model="date" label="Inline example" />
              </template>
            
        
    
        
            
              <script>
                import { mdbDatePicker2 } from 'mdbvue';
                export default {
                  name: 'Example',
                  components: {
                    mdbDatePicker2
                  },
                  data() {
                    return {
                      date: ''
                    };
                  }
                }
              </script>

Limit examples MDB Pro component

Disable past or future dates on the picker by using disabledPast or disabledFuture prop. More limit options are presented in the customization section. 

        
            
              <template>
                <mdb-date-picker-2 v-model="date" disabledPast label="Disabled past dates" />
              </template>
            
        
    
        
            
              <script>
                import { mdbDatePicker2 } from 'mdbvue';
                export default {
                  name: 'Example',
                  components: {
                    mdbDatePicker2
                  },
                  data() {
                    return {
                      date: ''
                    };
                  }
                }
              </script>

Disabled weekends MDB Pro component 

        
            
              <template>
                <mdb-date-picker-2 v-model="date" label="Disabled weekends" :limit="limit" />
              </template>
            
        
    
        
            
              <script>
                import { mdbDatePicker2 } from 'mdbvue';
                export default {
                  name: 'Example',
                  components: {
                    mdbDatePicker2
                  },
                  data() {
                    return {
                      date: '',
                      limit: [{
                        type: 'weekday',
                        available: [1, 2, 3, 4, 5]
                      }]
                    };
                  }
                }
              </script>

Custom icons MDB Pro component

Use custom font awesome icons within date picker.

        
            
              <template>
                <mdb-date-picker-2 icon="clock" far datePickerIcon="fas fa-calendar" v-model="date" />
              </template>
            
        
    
        
            
              <script>
                import { mdbDatePicker2 } from 'mdbvue';
                export default {
                  name: 'Example',
                  components: {
                    mdbDatePicker2
                  },
                  data() {
                    return {
                      date: ''
                    }
                  }
                }
              </script>

Keyboard navigation

Open date picker by pressing Enter key after focusing calendar icon and tab through available dates. Focus select and press enter to switch between day, year and month plates. On each view You can also use Arrows to move or Home and End buttons for choosing first or last item. Use Page Up or Page Down for swithing between months or years. Press Enter to select the date. The Delete key will clear selected value, while Esc will close the modal.

Date and time picker

You can use Date Picker and Time Picker components together to fill one input.

        
            
            <template>
              <div>
                <mdb-input :value="handlePickersValue()" @click.native="$refs.datePicker.open()" />
                <mdb-date-picker-2
                  ref="datePicker"
                  disable-input
                  v-model="datePickerValue"
                  @close="$refs.timePicker.open()" />
                <mdb-time-picker
                  ref="timePicker"
                  disable-input
                  v-model="timePickerValue" />
              </div>
            </template>
          
        
    
        
            
            <script>
              import { mdbDatePicker2, mdbTimePicker, mdbInput } from 'mdbvue';
              export default {
                name: 'DatePickerPage',
                components: {
                  mdbDatePicker2,
                  mdbTimePicker,
                  mdbInput
                },
                methods: {
                  handlePickersValue() {
                    let output = 'Pick date and time'
                    if (this.datePickerValue && this.timePickerValue) output = `${this.datePickerValue}, ${this.timePickerValue}`
                    else if (this.datePickerValue) output = this.datePickerValue
                    else if (this.timePickerValue) output = this.timePickerValue
                    return output
                  }
                },
                data() {
                  return {
                    datePickerValue: '',
                    timePickerValue: ''
                  }
                }
              }
            </script>

Customization

Strings

Change the month and weekday labels as you find suitable:

        
            
            options: {
              week: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
              month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
            }

Buttons

Change the button's text by passing a value:

        
            
            options: {
              buttons: {
                ok: 'Ok',
                cancel: 'Cancel',
                clear: 'Clear'
              }
            }

Colors

Easily change picker's color theme by passing color options:

        
            
            options: {
              color: {
                header: 'info',
                headerText: 'white',
                checkedDay: 'info'
              }
            }

Translations

You can define labels in any other language:

        
            
            options: {
              week: ['Sam', 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven'],
              month: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
              placeholder: 'Veuillez choisir une date',
              buttons: {
                ok: 'Ok',
                cancel: 'Effacer',
                clear: 'Aujourd hui'
              }
            }

Date limits

Set the minimum and maximum selectable dates on the picker:

        
            
            <template>
              <mdb-date-picker-2 :limit="limit" />
            </template>
          
        
    
        
            
            <script>
              import { mdbDatePicker2 } from 'mdbvue';
              export default {
                name: 'Example',
                components: {
                  mdbDatePicker2
                },
                data() {
                  return {
                    limit: [{
                        type: 'weekday',
                        available: [1, 2, 3, 4, 5]
                      },
                      {
                        type: 'fromto',
                        from: '2018-02-01',
                        to: '2018-06-20'
                    }]
                  };
                }
              }
            </script>

Disabled dates

Disable exact date or an array of dates like this:

        
            
            <template>
              <mdb-date-picker-2 :limit="arrayLimit" />
            </template>
          
        
    
        
            
            <script>
              import { mdbDatePicker2 } from 'mdbvue';
              export default {
                name: 'Example',
                components: {
                  mdbDatePicker2
                },
                data() {
                  return {
                    arrayLimit: [{
                      type: 'exact',
                      disabled: ['2019-12-12', '2019-12-14', '2019-12-18']
                    }]
                  }
                }
              }
            </script>

Disabled past/future

Disable past or future dates on the picker, by using disabledPast or disabledFuture prop:

        
            
            <template>
              <mdb-date-picker-2 disabledPast />
            </template>
          
        
    
        
            
            <script>
              import { mdbDatePicker2 } from 'mdbvue';
              export default {
                name: 'Example',
                components: {
                  mdbDatePicker2
                }
              }
            </script>

Disabled range of dates

Disable range of dates on the picker.

        
            
            <template>
              <mdb-date-picker-2 :limit="rangeLimit" />
            </template>
          
        
    
        
            
            <script>
              import { mdbDatePicker2 } from 'mdbvue';
              export default {
                name: 'Example',
                components: {
                  mdbDatePicker2
                },
                data() {
                  return {
                    rangeLimit: [{
                      type: 'range',
                      from: '2019-12-05',
                      to: '2019-12-15'
                    }]
                  }
                }
              }
            </script>

Disabled from or to an exact date

Disable from or to an exact date by using the following syntax:

        
            
            <template>
              <mdb-date-picker-2 :limit="fromLimit" />
            </template>
          
        
    
        
            
            <script>
              import { mdbDatePicker2 } from 'mdbvue';
              export default {
                name: 'Example',
                components: {
                  mdbDatePicker2
                },
                data() {
                  return {
                    fromLimit: [{
                      type: 'from',
                      from: '2020-03-04'
                    }],
                    // or
                    toLimit: [{
                      type: 'to',
                      to: '2020-03-04'
                    }]
                  }
                }
              }
            </script>

Vue Date Picker - API

In this section you will find advanced information about the Vue Date 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 {
        mdbDatePicker2
      } from 'mdbvue';
    </script>

API Reference: Properties

Name Type Default Description Example
limit Object {} Used to delimit available dates - when type:'fromto', two consecutive dates are specified (from:..., and to:..., which will be exluded; when type: 'weekday', available property holds an array of weekdays available limit: { type: 'fromto', ... }
options Array {} Changing picker options options: { type: 'day', ... }
disableOk Boolean false Disabling ok button <mdb-date-picker-2 disableOk />
disableClear Boolean false Disabling clear button <mdb-date-picker-2 disableClear />
disableCancel Boolean false Disabling cancel button <mdb-date-picker-2 disableCancel />
autoHide Boolean false Turning on auto-hide after picking a date <mdb-date-picker-2 autoHide />
validation Boolean false Enables validation <mdb-date-picker-2 :validation="isValidated" />
isValid Boolean false Custom validation check <mdb-date-picker-2 :isValid="true" />
validFeedback [String, Boolean] false Valid feedback label <mdb-date-picker-2 validFeedback="Correct" />
invalidFeedback [String, Boolean] false Invalid feedback label <mdb-date-picker-2 invalidFeedback="Invalid" />
defaultDate [String, Date] Sets default date <mdb-date-picker-2 :defaultDate="date" />
label String "Please choose a date Sets label <mdb-date-picker-2 label="label" />
bg Boolean false Sets design to animated border with background <mdb-date-picker-2 bg />
icon String Adds icon to a datepicker's input <mdb-date-picker-2 icon="clock" />
iconClass String Adds custom class to a datepicker's icon <mdb-date-picker-2 icon="clock" iconClass="yellow-text" />
far Boolean false Changes icon's style to regular <mdb-date-picker-2 icon="paper-plane" far/>
fab Boolean false Changes icon's style to brands <mdb-date-picker-2 icon="..." fab />
fal Boolean false Changes icon's style to light <mdb-date-picker-2 icon="..." fal />
inline Boolean false Enables inline mode <mdb-date-picker-2 inline />
inlinePlacement String 'bottom-start' Changes inline default placement. Most common options are 'top-start' and 'bottom-start'. <mdb-date-picker-2 inlinePlacement="top-start" />
datePickerIcon String 'far fa-calendar' Changes picker toggler icon. <mdb-date-picker-2 datePickerIcon="far fa-calendar-alt" />
title String 'Title' Defines modal picker title. <mdb-date-picker-2 title="Pick date" />

API Reference: Methods

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

Date Picker options

Name Type Default Description
format String 'YYYY-MM-DD' decides upon the output format
placeholder String null datepicker's input's placeholder
week Array null the day names tags array
buttons Object {} an object with ok, clear and cancel property, where the buttons names are specified
color Object {} an object with header, headerText and checkedDay property, where the colors are specified
inputStyle Object {} style object consisting of 'property': 'value' pairs
wrapperClass String '' used to style the datepicker's wrapper