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

          <script>
            import { mdbDatePicker } from 'mdbvue';
            export default {
              name: 'Example',
              components: {
                mdbDatePicker
              }
            }
          </script>

Custom icon MDB Pro component 


          <template>
            <mdb-date-picker icon="clock" far :option="options" />
          </template>
        

          <script>
            import { mdbDatePicker } from 'mdbvue';
            export default {
              name: 'Example',
              components: {
                mdbDatePicker
              },
              data() {
                return {
                  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.

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


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

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