DatePicker 日期选择器限制范围

需求:限制时间范围为90天,默认时间为当前时间至当前时间之前的90天的

可选范围:当前时间,或当前时间之间的时间

限制范围:90天

效果图

DatePicker 日期选择器限制范围_第1张图片

template部分

 

script

export defau{
  data(){
    return {
      time:[],
    }
  },
      pickerOptions: {
        //时间选择范围
        let _this = this
        onPick: ({ maxDate, minDate }) => {
           let moment = require("moment");
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime();
          // 如果你选择了两个日期了,就把那个变量置空
          if (maxDate) {
            this.choiceDate = "";
          }
          if(maxDate && minDate){
            let time = new Date();
             //两个时间中较大的时间
            let endtime = moment(maxDate).format("YYYY-MM-DD");
            time=moment(time).format("YYYY-MM-DD");
             _this.time = [];
             //如果较大的时间是当天,默认显示当前时间
            if(endtime==time){
              let time1 = new Date();
              let start=moment(minDate).format("YYYY-MM-DD HH:mm:ss");
              let end=moment(time1).format("YYYY-MM-DD HH:mm:ss");
              _this.time[0] = start;
              _this.time[1] = end;
              this.time=_this.time;
              // 关闭--时间控件下拉框
              that.$refs.timeBox.handleClose();
            }
          }
        },
        disabledDate: time => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 90 * 24 * 3600 * 1000;
            // 当前日期 - one = 90天之前
            const minTime = this.choiceDate - one;
            // 当前日期 + one = 90天之后
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              time.getTime() > Date.now()
            );
          } else {
            // 如果没有选择日期,就要限制不能选择今天及以后
            return time.getTime() > Date.now();
          }
        }
      }
}

文档说明

你可能感兴趣的:(笔记,elementui,vue.js,javascript)