让两个独立的日期选择器产生联动:(我这里用的是elmentUI的 DatePicker日期选择器)
效果展示:
方案1:
<el-col :span="12">
<el-form-item label="客服单结单时间">
<el-date-picker v-model="form.woCompletionTimeStart" placeholder="开始时间" align="right" type="date"
:picker-options="startPickerOptions" style="float: left; width: 181.5px;">
</el-date-picker>
<div class="timeLine"></div>
<el-date-picker v-model="form.woCompletionTimeEnd" placeholder="结束时间" align="right" type="date"
:picker-options="endPickerOptions" style=" float: right;width: 181.5px;">
</el-date-picker>
</el-form-item>
</el-col>
computed: {
startPickerOptions() {
const self = this
return {
disabledDate(time) {
if (self.form.woCompletionTimeEnd) {
return time.getTime() > new Date(self.form.woCompletionTimeEnd).getTime()
// new Date(self.form.woCompletionTimeEnd).getTime() 结束时间
// Date.now() - 8.64e7 // 当前时间的前一天
// time.getTime() // 任意时间
}
}
}
},
endPickerOptions() {
const self = this
return {
disabledDate(time) {
if (self.form.woCompletionTimeStart) { // 如果开始时间不为空,则结束时间大于开始时间
return new Date(self.form.woCompletionTimeStart).getTime() > time.getTime()
}
}
}
}
},
方案2:两个日期选择器的联动-简书
<el-form-item label="开始日期:">
<el-date-picker
v-model="form.startDate"
type="date"
placeholder="选择日期"
style="width: 100%"
value-format="yyyy-MM-dd"
:picker-options="startPickerOptions"
/>
</el-form-item>
<el-form-item label="结束日期:">
<el-date-picker
v-model="form.endDate"
type="date"
placeholder="选择日期"
style="width: 100%"
value-format="yyyy-MM-dd"
:picker-options="endPickerOptions"
/>
</el-form-item>
computed: {
startPickerOptions() {
const self = this
return {
disabledDate(time) {
if (self.form.endDate) { // 如果结束时间不为空,则小于结束时间
return new Date(self.form.endDate).getTime() < time.getTime() || time.getTime() < Date.now() - 8.64e7
} else {
return time.getTime() < Date.now() - 8.64e7 // 开始时间不选时,结束时间最大值大于等于当天
}
}
}
},
endPickerOptions() {
const self = this
return {
disabledDate(time) {
if (self.form.startDate) { // 如果开始时间不为空,则结束时间大于开始时间
return new Date(self.form.startDate).getTime() - 8.64e7 > time.getTime()
} else {
return time.getTime() < Date.now() - 8.64e7// 开始时间不选时,结束时间最大值大于等于当天
}
}
}
}
}