Rate these docs

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.


Basic example MDB Pro component


        <template>
          <mdb-date-picker @getValue="getPickerValue" />
        </template>
      

        <script>
          import { mdbDatePicker } from 'mdbvue';
          export default {
            name: 'Example',
            components: {
              mdbDatePicker
            },
            methods: {
              getPickerValue(value) {
                console.log(value);
              }
            }
          }
        </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 :option="option" />
        </template>
      

        <script>
          import { mdbDatePicker } from 'mdbvue';
          export default {
            name: 'Example',
            components: {
              mdbDatePicker
            },
            data() {
              return {
                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: 'Please choose a date',
                  buttons: {
                    ok: 'OK',
                    clear: 'Clear',
                    today: 'Today'
                  },
                  overlayOpacity: 0.5
                }
              };
            }
          }
        </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>
      

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


import { mdbDatePicker } from 'mdbvue';
      

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 />

API Reference: Methods

Name Parameters Description Example
@getValue value Returns time-picker value. <mdb-date-picker @getValue="getPickersValue" />

Date Picker options

Name Type Default Description
type String '' chooses type of the picker (available optiions: day and multi-day)
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 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