Bootstrap Date Picker MDB Pro component

Date picker is a single-file component allowing for choosing date(s) on an actual calendar.


Basic example



Basic usage:


<template>
  <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
</template>

<script>
import { Container, DatePicker } from 'mdbvue';

export default {
    name: 'Example',
    components: {
      DatePicker
    },
    data() {
      return {
        startTime: {
          time: ''
    },
    option: {
      type: 'multi-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: 'teal',
        headerText: 'white',
        checkedDay: 'teal'
      },
      buttons: {
        ok: 'Ok',
        cancel: 'Cancel'
      }
    },
      timeoption: {
          type: 'min',
          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'
      },
      multiOption: {
          type: 'multi-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"
      },
      limit: [{
          type: 'weekday',
          available: [1, 2, 3, 4, 5]
      },
      {
        type: 'fromto',
        from: '2018-02-01',
        to: '2018-06-20'
      }]
    };
  }
};

   </script>

Options

Name Default Type Description
type '' String chooses type of the picker (available optiions: day andmulti-day)
format 'YYYY-MM-DD' String decides upon the output format
placeholder null String datepicker's input's placeholder
week null Array the day names tags array
wrapperClass '' String used to style the datepicker's wrapper
inputStyle {} Object style object consisting of 'property': 'value' pairs
max undefined String specifies maximum allowed time
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)
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