raiondesu/vue-mdl-datepicker

Material Design Datepicker for Vue.js

vue-mdl-datepicker

Material Design Datepicker for Vue.js

Install

# via yarn
yarn add vue-mdl-datepicker

# or via npm
npm install --save vue-mdl-datepicker

Usage

<template>
  <div>{{date}}</div>
  <mdl-datepicker
    v-model="date"
    :default="date"
  ></mdl-datepicker>
</template>

<script>
import 'vue-mdl-datepicker/dist/vue-mdl-datepicker.css';
import MdlDatepicker from 'vue-mdl-datepicker';

export default {
  name: 'MyComponent',
  components: { MdlDatepicker },
  data() {
    return {
      date: new Date(),
    };
  },
};
</script>

Props

Name	Type	Default	Description
firstDayOfWeek	Number	0	The fist day of the week, where 0 represents Sunday.
default	Date		Default selected date
autoOk	Boolean	false	If true, automatically ok and close datepicker
disableYearSelection	Boolean	false	If true, year selection will be disabled
maxDate	Date	date + 100 year	Maximum selected date
minDate	Date	date - 100 year	Minimum selected date
shouldDisableDate	Function		Function return those days should be disabled
formatDate	Function	YYYY-MM-dd	Function return format of displayed date
orientation	String	portrait	Orientation of datepicker, portrait or landscape

TODO

• Transitions

LICENSE

MIT

Copyright (c) 2016 CYBAI