如果你有两个 datepicker,又想要联动的话,进来看看吧
其实想要联动,用 daterange 更加方便,但是产品不想用这个组件的话呢?
项目中很多时候两个 datepicker 都需要联动,比如今天的话题:
# 时间范围要求
- 先选择开始日期后,结束日期只能选择开始日期的后 7 天
- 先选择结束日期后,开始日期只能选择结束日期的前 7 天
# 思路
element 其实给每个 datepicker 提供了 picker-options 的属性,从这个属性入手,可以设置日期选择器的禁止选择日期,还可以动态哦
# 代码实现
- 首先是两个 datepicker 的标签不能少
<el-date-picker
type="date"
placeholder="选择开始日期"
v-model="form.start"
:picker-options="effectivePickerStart"
:editable="false">
</el-date-picker>
<el-date-picker
type="date"
placeholder="选择结束日期"
v-model="form.end"
:picker-options="effectivePickerEnd"
:editable="false">
</el-date-picker>
- data 内绑定两个选择器的 picker-options
data() {
return {
effectivePickerStart: {
disabledDate: this.effectivePickerStartDisabledDate // 时间限制
},
effectivePickerEnd: {
disabledDate: this.effectivePickerEndDisabledDate // 时间限制
}
}
}
- methods 内写上相应的时间限制方法,返回 true 或 false 就ok啦
methods: {
effectivePickerStartDisabledDate(time) { // 当end time 选择时,限制start time 只能选7天之前
let timeGetTime = time.getTime();
if (this.form.end) {
let now = new Date(this.form.end).getTime() - 24 * 60 * 60 * 1000;
const sevenDaysBefore = new Date(this.form.end).getTime() - 24 * 60 * 60 * 1000 * 7;
return timeGetTime > now || timeGetTime < sevenDaysBefore;
}
},
effectivePickerEndDisabledDate(time) { // 当start time 选择时,限制end time 只能选7天之后
let timeGetTime = time.getTime();
if (this.form.start) {
const onDayAfter = new Date(this.form.start).getTime() + 24 * 60 * 60 * 1000;
const sevenDaysAfter = new Date(this.form.start).getTime() + 24 * 60 * 60 * 1000 * 7;
return timeGetTime < onDayAfter || timeGetTime > sevenDaysAfter;
}
}
}
# 进阶
element 的时间选择器、日期选择器、日期时间选择器其实远比看上去的强大,就在于你怎么运用他们丰富的属性了
比如:还是两个分开的 datepicker ,选择了开始时间,然而这个时间是下个月甚至是下一年,那么再去选择结束时间将会默认显示当前年月,这是非常不友好的
优化一下:
# 其中一个时间选择非本月时,联动的另一个 datepicker 自动跳到选择的月份
- 绑定两个 default-value
<el-date-picker
type="date"
placeholder="选择开始日期"
:default-value="defaultStartValue"
v-model="form.start"
:picker-options="effectivePickerStart"
:editable="false">
</el-date-picker>
<el-date-picker
type="date"
placeholder="选择结束日期"
:default-value="defaultEndValue"
v-model="form.end"
:picker-options="effectivePickerEnd"
:editable="false">
</el-date-picker>
- 监听属性,设置 default-value
watch: {
'form.start': function(start) {
if (start) {
this.defaultEndValue = new Date(this.$dateFormat(start, 'yyyy-MM') + '-01')
}
},
'form.end': function(end) {
if (end) {
this.defaultStartValue = new Date(this.$dateFormat(end, 'yyyy-MM') + '-01')
}
}
}
这样的话配合上 picker-options 简直是天衣无缝啦