开始时间不能大于结束时间 结束时间不能小于开始时间
template中
时间:<DatePicker
type="date"
placement="bottom-end"
placeholder="时间筛选"
style="width: 100px"
v-model="startTime"
:options="startOption"
></DatePicker>
至
<DatePicker
type="date"
placement="bottom-end"
placeholder="时间筛选"
style="width: 100px"
:options="endOption"
v-model="endTime"
></DatePicker>
script中
export default{
data(){
return{
startOption: {},//开始时间绑定配置
endOption: {},//结束时间绑定配置
startTime:'',//开始时间
endTime:'',//结束时间
}
},
watch: {
startTime() {
let self = this;
this.endOption = {
disabledDate(date) {
if (self.startTime) {
return date && date.valueOf() < self.startTime;
}
},
};
},
endTime() {
let self = this;
this.startOption = {
disabledDate(date) {
if (self.endTime) {
return date && date.valueOf() > self.endTime;
}
},
};
},
},
}
.固定时间之前的日期不能选(以及限制开始时间与结束时间)
data(){
return{
endOption: {
disabledDate(date) {
return date && date.valueOf() < new Date("2020-12-09");
},
},
startOption: {
disabledDate(date) {
return date && date.valueOf() < new Date("2020-12-09");
},
},
}
},
watch: {
"startTime"() {
let self = this;
this.endOption = {
disabledDate(date) {
if (self.startTime) {
return date && date.valueOf() < self.startTime;
}
}
};
},
"endTime"() {
let self = this;
this.startOption = {
disabledDate(date) {
if (self.endTime) {
return date && (self.endTime < date || new Date("2020-12-09") > date) ;
}
}
};
}
},
这里限制的2020-12-09之前的日期不能选择,并且在选择开始时间与结束时间也需要相互限制。当选择结束时间之后 开始时间可选就为区间。
选开始日期与结束日期之间选择时间
template
时间:<DatePicker
type="date"
placement="bottom-end"
placeholder="时间筛选"
style="width: 100px"
v-model="startTime"
:options="startOption"
></DatePicker>
至
<DatePicker
type="date"
placement="bottom-end"
placeholder="时间筛选"
style="width: 100px"
:options="endOption"
v-model="endTime"
></DatePicker>
<DatePicker
type="datetime"
placement="bottom-end"
placeholder="时间筛选"
style="width: 100px"
:options="datetimeOption"
v-model="datetime1"
></DatePicker>
script中
export default{
data(){
return{
startOption: {},//开始时间绑定配置
endOption: {},//结束时间绑定配置
startTime:'',//开始时间
endTime:'',//结束时间
}
},
watch: {
startTime() {
let self = this;
this.endOption = {
disabledDate(date) {
if (self.startTime) {
return date && date.valueOf() < self.startTime;
}
},
};
this.datetimeOption = {
disabledDate(date) {
if (self.endTime && self.startTime) {
return (
date &&
(date.valueOf() > self.endTime ||
date.valueOf() < self.startTime)
);
}
},
};
},
endTime() {
let self = this;
this.startOption = {
disabledDate(date) {
if (self.endTime) {
return date && date.valueOf() > self.endTime;
}
},
};
this.datetimeOption = {
disabledDate(date) {
if (self.endTime && self.startTime) {
return (
date &&
(date.valueOf() > self.endTime ||
date.valueOf() < self.startTime)
);
}
},
};
},
},
}