Rate this 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 :date="startDate" :option="option" @getValue="getPickerValue"></mdb-date-picker>
</template>

<script>
import { mdbDatePicker } from 'mdbvue';

export default {
  name: 'Example',
  components: {
    mdbDatePicker
  },
  methods: {
    getPickerValue(value) {
      console.log(value);
    }
  },
  data() {
    return {
      startDate: {
        date: ''
      },
      option: {
        type: 'day',
        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',
        placeholder: 'Please choose a date',
        inputStyle: {
          'display': 'inline-block',
          'padding': '6px',
          'line-height': '22px',
          'font-size': '16px',
          'border': '2px solid #fff',
          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
          'border-radius': '2px',
          'color': '#5F5F5F'
        },
        color: {
          header: 'primary',
          headerText: 'white',
          checkedDay: 'primary'
        },
        buttons: {
          ok: 'Ok',
          cancel: 'Cancel'
        }
      }
    };
  }
};

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



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: {
  checked: '#F50057',
  header: '#3f51b5',
  headerText: '#fff'
},
inputStyle: {
  'display': 'inline-block',
  'padding': '6px',
  'line-height': '22px',
  'font-size': '16px',
  'border': '2px solid #fff',
  'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
  'border-radius': '2px',
  'color': '#5F5F5F'
},
placeholder: 'when?',
buttons: {
  ok: 'OK',
  cancel: 'Cancel'
},
overlayOpacity: 0.5,
dismissible: true

      

Customization


Strings

Change the month and weekday labels as you find suitable:


option: {
  type: 'day',
  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:


buttons: {
  ok: 'Ok',
  cancel: 'Cancel'
}
      

Translations

You can define labels in any other language:



option: {
  type: 'day',
  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'
  }
}

      

Date limits

Set the minimum and maximum selectable dates on the picker:


limit: [{
    type: 'weekday',
    available: [1, 2, 3, 4, 5]
  },
  {
    type: 'fromto',
    from: '2018-02-01',
    to: '2018-06-20'
}]
      

Date Picker - API

In this section you will find advanced information about the 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
date Array {} Definses default date value <mdb-date-picker date="''" />
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', ... }

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
animate Object {} used to specify animation using ovarlayOpacity (String, 0.5 as default) and dismissible (Boolean)
inputStyle Object {} style object consisting of 'property': 'value' pairs
wrapperClass String '' used to style the datepicker's wrapper