之前看到有人须要一个年份范畴选择器，因为element-ui里没有提供<el-date-picker type="yearange">的类似性能，故本人写了一个简略的《年份范畴选择器》。
上面是组件代码，其中有用到moment这个js日期工夫库，不须要的能够应用new Date()进行解决。
<template> <div class="picker-year"> <el-form ref="year-range-picker" :model="formData" :rules="rules"> <el-row> <el-col :span="11"> <el-form-item prop="yearStart"> <el-date-picker class="picker-first" v-model="formData.yearStart" value-format="yyyy" @change="val=>onDateChange(0,val)" :picker-options="pickerOptionsStart" :placeholder="startPlaceholder" type="year"> </el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="yearEnd"> <el-date-picker class="picker-second" v-model="formData.yearEnd" value-format="yyyy" @change="val=>onDateChange(1,val)" :picker-options="pickerOptionsEnd" :placeholder="endPlaceholder" type="year"> </el-date-picker> </el-form-item> </el-col> </el-row> </el-form> </div></template><script>import moment from 'moment'export default { name: "YearRangePicker", data() { return { formData: { yearStart: '', yearEnd: '', }, rules: { yearStart: [ {required: true, message: '请抉择开始年份', trigger: 'change'} ], yearEnd: [ {required: true, message: '请抉择完结年份', trigger: 'change'} ], }, pickerOptionsStart: { disabledDate(date) { return false }, }, pickerOptionsEnd: { disabledDate(date) { return false }, } } }, watch: { value: { handler(newVal, oldValue) { if (newVal) { this.yearStart = newVal[0] this.yearEnd = newVal[1] } }, immediate: true }, }, props: { value: { type: Array, default: [] }, startPlaceholder: { type: String, default: '' }, endPlaceholder: { type: String, default: '' } }, methods: { onDateChange(index, value) { this.pickerOptionsStart = { disabledDate: (date) => { return (moment(date) > moment().year(this.yearEnd)) }, } this.pickerOptionsEnd = { disabledDate: (date) => { return moment(date) <= moment().year(this.yearStart) }, } if (!value) { this.rules = { yearStart: [ {required: false, message: '请抉择开始年份', trigger: 'change'} ], yearEnd: [ {required: false, message: '请抉择完结年份', trigger: 'change'} ], } this.formData = { yearStart: '', yearEnd: '' } } else { this.rules = { yearStart: [ {required: true, message: '请抉择开始年份', trigger: 'change'} ], yearEnd: [ {required: true, message: '请抉择完结年份', trigger: 'change'} ], } } this.$refs["year-range-picker"].validate((valid) => { if (valid) { console.log('校验后果', index, value, [this.formData.yearStart, this.formData.yearEnd]) this.$emit('change', [this.formData.yearStart, this.formData.yearEnd]) this.$emit('input', [this.formData.yearStart, this.formData.yearEnd]) } else { console.log('error submit!!'); return false; } }); } },}</script><style scoped>.picker-year { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: 100%;}.picker-first { width: 100%;}.line { text-align: center;}.picker-second { width: 100%;}</style>以下是在页面中调用的DEMO。
<year-picker v-model="dataQuery.yearRange" start-placeholder="开始年份" end-placeholder="完结年份" @change="val=>console.log(val)"/>