1. 功能需求描述
点击时间表上任意一个时间点,点击选中后可选时间范围为该时间点的前后十五天
具体功能可以修改天数
2.直接上代码
网页部分
注意 :picker-options=" "
<el-date-picker
v-model="landDate"
style="width: 100%"
type="daterange"
align="right"
value-format="yyyy-MM-dd"
range-separator="——"
start-placeholder="开始日期"
:picker-options="pickerOptions"
end-placeholder="结束日期">
</el-date-picker>
3.this 指向问题
如果 this定义报错可用试一下这个方法
在.eslintrc.js 文件内配置
false时不会影响其它页面定义的 this
rules: {
'@typescript-eslint/no-this-alias': [
'error',
{
allowDestructuring: false, // Allow `const { props, state } = this`; false by default
allowedNames: ['vm'] // Allow `const vm= this`; `[]` by default
}
]
}
4.TS部分,JS同理
// 定义空变量
private timeAhead = ''
private laterTime = ''
// 时间选择范围
private get pickerOptions() {
// this指向问题
const vm = this
return {
onPick(time: any) {
(this as any).$nextTick(() => {
// time.minDate -- 选中开始的时间
const start = new Date(time.minDate)
// 前十五天
vm.timeAhead = moment(start.getTime() - 3600 * 1000 * 24 * 15).format('YYYY-MM-DD')
// 后十五天
vm.laterTime = moment(start.getTime() + 3600 * 1000 * 24 * 15).format('YYYY-MM-DD')
})
},
disabledDate(time: any): boolean {
return new Date(vm.timeAhead).getTime() > time.getTime() || new Date(vm.laterTime).getTime() < time.getTime()
}
}
}