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