el-date-picker 接触联动
时间: 2023-08-16 07:10:45 浏览: 95
date-picker
el-date-picker可以通过设置picker-options属性来实现联动效果。在picker-options中,可以使用onPick属性来监听日期选择的变化,并根据选择的日期来更新其他相关的日期选择器。在onPick的回调函数中,可以通过minDate和maxDate来获取当前选择的起始日期和结束日期。根据这些信息,可以动态更新其他日期选择器的可选范围。
例如,可以定义一个selectDate变量来保存用户选择的起始日期,在onPick的回调函数中,根据选择的起始日期来更新selectDate的值。然后,在disabledDate属性中,根据selectDate的值来限制其他日期选择器的可选范围。
具体的实现代码如下所示:
```
data() {
return {
selectDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime();
if (maxDate) {
this.selectDate = '';
}
},
disabledDate: (time) => {
if (this.selectDate !== '') {
const one = (15 * 24 * 3600 - 1) * 1000; // 00:00:00 到23:59:59
const minTime = this.selectDate - one;
const maxTime = this.selectDate + one;
return time.getTime() < minTime || time.getTime() > maxTime;
}
}
}
}
}
```
这样,当用户选择起始日期时,其他日期选择器的可选范围就会根据选择的起始日期进行联动了。
阅读全文