Material Design Datepicker for Vue.js
# via yarn
yarn add vue-mdl-datepicker
# or via npm
npm install --save vue-mdl-datepicker
<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>
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 |
- Transitions
Copyright (c) 2016 CYBAI