Vue - el-date-picker年范围连级选择器基于element封装
引入这个是,可能有些需求是默认选择最近多久多久的,当然也可以不写直接让yeartsstart和yeartsEnd:''。这个就是算法就是第一个不能大于第二个,第二个不能小于第一个,还有不能选择大于今年。这个是element单级选择器用拉两个。
·
这个是element单级选择器用拉两个

引入这个是,可能有些需求是默认选择最近多久多久的,当然也可以不写直接让yeartsstart和yeartsEnd:''。
![]()

这个就是算法就是第一个不能大于第二个,第二个不能小于第一个,还有不能选择大于今年

1.这是第一部分
<el-form-item label="">
<el-date-picker
v-model="searchForm.yeartsStart"
:picker-options="startDatePicker"
value-format="yyyy"
type="year"
placeholder="开始时间"
>
</el-date-picker>
~
<el-date-picker
v-model="searchForm.yeartsEnd"
value-format="yyyy"
:picker-options="endDatePicker"
type="year"
placeholder="结束时间"
>
</el-date-picker>
</el-form-item>
2.这是第二部分
data () {
return {
getUserInfo,
startDatePicker: this.beginDate(), // 开始年
endDatePicker: this.processDate(), // 结束年
searchForm: {
yeartsStart: moment().subtract(5, 'year').format('YYYY'), // 开始年
yeartsEnd: moment().format('YYYY') // 结束年
}
}
},
3.这是第三部分
// 时间算法
beginDate () {
let self = this
return {
disabledDate (time) {
let fixedTime = new Date(time)
if (self.searchForm.yeartsEnd !== null) {
return fixedTime.getFullYear() > self.searchForm.yeartsEnd || fixedTime.getFullYear() > new Date().getFullYear()
} else {
return fixedTime.getFullYear() > new Date().getFullYear()
}
}
}
},
processDate () {
let self = this
return {
disabledDate (time) {
let fixedTime = new Date(time)
return fixedTime.getFullYear() < self.searchForm.yeartsStart || fixedTime.getFullYear() > new Date().getFullYear()
}
}
},
更多推荐


所有评论(0)