【vue】【iview】时间组件限制

开始时间不能大于结束时间 结束时间不能小于开始时间

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)
                        );
                    }
                },
            };
        },
    },
	}