Vue Date Picker MDB Pro component

Vue Date Picker - Bootstrap 4 & Material Design

Vue Bootstrap date picker is a plugin that adds a function of selecting date in a user-friendly way.

More examples

Basic example MDB Pro component 

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

Outline MDB Pro component 

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

Custom icon MDB Pro component 

        
            
          <template>
            <mdb-date-picker icon="clock" far :option="options" v-model="date3" />
          </template>
          
        
    
        
            
            <script>
              import {
                mdbDatePicker
              } from 'mdbvue';
              export default {
                name: 'Example',
                components: {
                  mdbDatePicker
                },
                data() {
                  return {
                    date3: '',
                    options: {
                      placeholder: '2018-04-13',
                      label: "default date"
                    }
                  };
                }
              }
            </script>

Default settings

These are the default settings applied with the basic invocation above. To have them changed, simply initialize the Date Picker with desired option property.

        
            
        <template>
          <mdb-date-picker v-model="date" :option="option" />
        </template>
        
        
    
        
            
          <script>
            import {
              mdbDatePicker
            } from 'mdbvue';
            export default {
              name: 'Example',
              components: {
                mdbDatePicker
              },
              data() {
                return {
                  date: '2018-04-13',
                  option: {
                    type: 'day',
                    SundayFirst: false,
                    week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
                    month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
                      'October', 'November', 'December'
                    ],
                    format: 'YYYY-MM-DD',
                    color: {
                      header: 'primary',
                      headerText: 'white',
                      checkedDay: 'primary'
                    },
                    placeholder: '2018-04-13',
                    buttons: {
                      ok: 'OK',
                      clear: 'Clear',
                      today: 'Today'
                    },
                    overlayOpacity: 0.5
                  }
                };
              }
            }
          </script>

Keyboard navigation

Open date picker by pressing Enter key and tab through available dates - press Enter once to select the date, twice to select and close date picker. 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 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 {
            mdbDatePicker,
            mdbTimePicker,
            mdbInput
          } from 'mdbvue';
          export default {
            name: 'DatePickerPage',
            components: {
              mdbDatePicker,
              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:

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

Buttons

Change the button's text by passing a value:

        
            
          option: {
            buttons: {
              ok: 'Ok',
              cancel: 'Cancel',
              today: 'Today'
            }
          }

Colors

Easily change the picker's colors by passing a color option:

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

Translations

You can define labels in any other language:

        
            
          option: {
            week: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
            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',
              today: 'Aujourd hui'
            }
          }

Date limits

Set the minimum and maximum selectable dates on the picker:

        
            
        <template>
          <mdb-date-picker :limit="limit" />
        </template>
        
        
    
        
            
        <script>
          import {
            mdbDatePicker
          } from 'mdbvue';
          export default {
            name: 'Example',
            components: {
              mdbDatePicker
            },
            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 :limit="arrayLimit" />
        </template>
        
        
    
        
            
        <script>
          import {
            mdbDatePicker
          } from 'mdbvue';
          export default {
            name: 'Example',
            components: {
              mdbDatePicker
            },
            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 disabledPast />
        </template>
        
        
    
        
            
        <script>
          import {
            mdbDatePicker
          } from 'mdbvue';
          export default {
            name: 'Example',
            components: {
              mdbDatePicker
            }
          }
        </script>

Disabled range of dates

Disable range of dates:

        
            
        <template>
          <mdb-date-picker :limit="rangeLimit" />
        </template>
        
        
    
        
            
        <script>
          import {
            mdbDatePicker
          } from 'mdbvue';
          export default {
            name: 'Example',
            components: {
              mdbDatePicker
            },
            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 :limit="fromLimit" />
        </template>
        
        
    
        
            
        <script>
          import {
            mdbDatePicker
          } from 'mdbvue';
          export default {
            name: 'Example',
            components: {
              mdbDatePicker
            },
            data() {
              return {
                fromLimit: [{
                  type: 'from',
                  from: `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${currentDate.getDate()-3}`
                }]
              }
            }
          }
        </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 {
        mdbDatePicker
      } 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', ... }
option Array {} Changing picker options option: { type: 'day', ... }
disableOk Boolean false Disabling ok button <mdb-date-picker disableOk />
disableClear Boolean false Disabling clear button <mdb-date-picker disableClear />
disableToday Boolean false Disabling today button <mdb-date-picker disableToday />
autoHide Boolean false Turning on auto-hide after picking a date <mdb-date-picker autoHide />
validation Boolean false Enables validation <mdb-date-picker :validation="isValidated" />
isValid Boolean false Custom validation check <mdb-date-picker :isValid="true" />
validFeedback [String, Boolean] false Valid feedback label <mdb-date-picker validFeedback="Correct" />
invalidFeedback [String, Boolean] false Invalid feedback label <mdb-date-picker invalidFeedback="Invalid" />
defaultDate [String, Date] Sets default date <mdb-date-picker :defaultDate="date" />
label String "Please choose a date Sets label <mdb-date-picker label="label" />
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 />

API Reference: Methods

Name Parameters Description Example
@getValue value Returns time-picker value. <mdb-date-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 datePicker close. <mdb-date-picker @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, today 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