参考文档： /weifeiyue/vue-datepicker-local
支持年份选择器，月份选择器，日期选择器，时间选择器，且均支持范围选择
效果如下演示年月日选择（修改组件相关默认样式，并且只能选择当前时间往前50年之内的日期）
<DatePickerv-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 weekyearSuffix: '年', // format of headmonthsHead: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), // months of headmonths: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), // months of panelweeks: '一_二_三_四_五_六_日'.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;}}
