Vue2日期选择器插件（vue-datepicker-local）

参考文档： https://github.com/weifeiyue/vue-datepicker-local

支持年份选择器，月份选择器，日期选择器，时间选择器，且均支持范围选择

效果如下演示年月日选择（修改组件相关默认样式，并且只能选择当前时间往前50年之内的日期）

<DatePicker
    v-model="date"
    :local="local"
    placeholder="请选择注册时间"
    format="YYYY-MM-DD"
    :disabled-date="disabledDate"
    clearable />

import DatePicker from 'vue-datepicker-local'
components: {
    DatePicker
},
data () {
    return {
        date: new Date(), // 默认选择当前日期
        local: { // 定制化日期选择的格式内容
            dow: 1, // Monday is the first day of the week
            yearSuffix: '年', // format of head
            monthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), // months of head
            months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), // months of panel
            weeks: '一_二_三_四_五_六_日'.split('_') // weeks
        },
    }
},
watch: {
    date (to, from) {
        console.log('to:', to)
        if (to === '') {
            this.checkFields('date')
        } else {
            this.checkFocus('date')
        }
    }
},
methods: {
    disabledDate (date) {
        if (date.getTime() > new Date().getTime()) { // 当前日期以后的时间禁用
            return true
        }
        // 当前时间50年前的日期禁用
        if (date.getFullYear() < new Date().getFullYear() - 50) {
            return true
        }
        if (date.getFullYear() === new Date().getFullYear() - 50 && date.getMonth() < new Date().getMonth()) {
            return true
        }
        if (date.getFullYear() === new Date().getFullYear() - 50 && date.getMonth() === new Date().getMonth() && date.getDate() < new Date().getDate()) {
            return true
        }
    }
}
// 重写组件相关样式
.datepicker {
    width: 290px;
    height: 40px;
    line-height: 40px;
    /deep/ input {
        color: #444;
        height: 40px;
        line-height: 40px;
    }
    /deep/ .focus {
        border: 1px solid @mainColor;
    }
    /deep/ .datepicker-popup {
        width: 278px;
        .calendar-head {
            width: 278px;
            .calendar-year-select, .calendar-month-select  {
                font-size: 14px;
                &:hover {
                    color: @mainColor;
                }
            }
            .calendar-prev-year-btn, .calendar-prev-month-btn, .calendar-next-year-btn, .calendar-next-month-btn {
                &:hover {
                    color: @mainColor;
                }
            }
        }
        .calendar-body {
            width: 278px;
            height: 200px;
            .calendar-date {
                line-height: 100%;
            }
            .calendar-date-selected {
                background: @mainColor;
            }
        }
        .datepicker__buttons {
            .datepicker__button-cancel {
                background: E3E3E3;
            }
            .datepicker__button-select {
                background: @mainColor;
            }
        }
    }
    .calendar-date-selected {
        background: @mainColor;
    }
}