iView 日期选择器开始时间至结束时间限制(以及固定时间之前的日期不能选)

1.

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

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


        
        
data(){
  return{
    startOption: {},
    endOption: {}
  }
},
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;
            }
          }
        };
      }
    },

iView 日期选择器开始时间至结束时间限制(以及固定时间之前的日期不能选)_第1张图片

2.固定时间之前的日期不能选(以及限制开始时间与结束时间)

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之前的日期不能选择,并且在选择开始时间与结束时间也需要相互限制。当选择结束时间之后  开始时间可选就为区间。

iView 日期选择器开始时间至结束时间限制(以及固定时间之前的日期不能选)_第2张图片

 

你可能感兴趣的:(前端,vue,iview,javascript,前端,html5)