//时间根据条件改变
options1: {
disabledDate(date) {
return date && date.valueOf() < Date.now() + 86400000
}
}, // 日期从后天开始选择
options2: {
disabledDate(date) {
return date && date.valueOf() < Date.now() + 86400000 + + 86400000
}
}, // 日期从大后天开始选择
options3:{
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000
}
}, //日期从当天开始
// 卸载watch里面
changeData: {
handler(newV, oldV) {
// console.log(newV)
newV.isExpedited = this.infoData.isExpedited;
newV.reservationLocation = this.infoData.reservationLocation
if (newV.reservationLocation) { // 判断地点选项是否存在
newV.reservationLocation = newV.reservationLocation.join(",") //将地点转换为字符串
if (newV.isExpedited == 0 && !newV.reservationLocation.includes("北京")) {
this.time = this.options2 //让时间从大后天开始
this.time1 = this.options2 //让时间从大后天开始
} else if(newV.isExpedited == 0 && newV.reservationLocation.includes("北京")){
this.time = this.options1 // 时间从后天开始
this.time1 = this.options1 //时间从后天开始
} else if(newV.isExpedited == 1){
this.time = this.options3 // 时间从后天开始
this.time1 = this.options3 //时间从后天开始
} else {
this.time = this.options2
this.time = this.options2
}
}
}
}
// 两个输入框限制时间,结束时间不能大于开始时间,只到天
<FormItem label="预约开始时间" prop="reservationStartTime">
<DatePicker
v-model="searchForm.reservationStartTime"
type="date"
placeholder="请选择日期"
style="width:100%"
:clearable="false"
:options="startTimeOptions"
@on-change="startTimeChange"
></DatePicker>
</FormItem>
<FormItem label="预约结束时间" prop="reservationEndTime">
<DatePicker
v-model="searchForm.reservationEndTime"
type="date"
placeholder="请选择日期"
style="width:100%"
:clearable="false"
:options="endTimeOptions"
@on-change="endTimeChange"
></DatePicker>
</FormItem>
startTimeChange: function(e) { // 设置开始时间
this.endTimeOptions = {
disabledDate: endTime => {
return endTime < new Date(e)- 86400000
}
}
},
endTimeChange: function(e) { // 设置结束时间
this.startTimeOptions = {
disabledDate(startTime) {
return startTime > new Date(e)
}
}
},
iview 日期限制
最新推荐文章于 2024-01-29 10:58:13 发布