element DatePicker 日期选择器 时间限制

在这里插入图片描述

主要功能:

1、初次载入时获取当前日期前后一个月
2、只能选择当前日期往前3个月
3、第一个日期选择后,只能选前后一个月

代码:

<el-date-picker
            style="margin-left: 10px; margin-right: 10px"
            v-model="time"
            format="yyyy-MM-dd "
            value-format="yyyy-MM-dd"
            @change="timeSearch()"
            @blur="test()"
            :picker-options="pickerOptions"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
pickerOptions: {
        
        onPick: ({ maxDate, minDate }) => {
          // 限制前后31天之内
          // console.log('onpick')
          // console.log(minDate)
          // console.log(maxDate)
          //这里的minDate可以理解为第一个选中的日期

          this.selectDate = minDate.getTime();
          console.log(this.selectDate)
          if (minDate) {
            this.sign = '1'
            

          }
          if(maxDate){
            this.selectDate = ''
            this.sign = '' //标记
          }
        },
        disabledDate: (time) => {
          // if (this.selectDate !== "") {
          //   const one = 31 * 24 * 3600 * 1000;
          //   const minTime = this.selectDate - one;
          //   const maxTime = this.selectDate + one;
          //   return time.getTime() < minTime || time.getTime() > maxTime;
          // }else if(this.selectDate == ""){
          //   const one = 90 * 24 * 3600 * 1000;
          //   const minTime = this.selectDate - one;
          //   const maxTime = this.selectDate + one;
            
          // }
          if(this.sign !== ""){
            const one = 31 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
          
          const curDate = (new Date()).getTime()
          let day =90* 24 * 3600 * 1000
          const lastThreeM = curDate - day
          const naxtThreeM = curDate + day
          return time.getTime() < lastThreeM||time.getTime() > curDate;
          
        },
      },
   


created() {
    var _this = this;
    //页面载入完成时,自动获取最近一个月时间

    // const myDate = new Date();
    // const month = myDate.getMonth()+1
    // const today = myDate.getFullYear()+'-'+month+'-'+myDate.getDate();
    // console.log('today')
    // console.log(today)
    // const lastToday = this.lastMonth(today)
    // console.log('lastToday')
    // console.log(lastToday)
    // this.time = lastToday+'至'+ today
    // this.time1 = lastToday+'至'+ today
    // this.searchClick()

    var time = new Date();
    var day = ("0" + time.getDate()).slice(-2);
    var month = ("0" + (time.getMonth() + 1)).slice(-2);
    var today = time.getFullYear() + "-" + month + "-" + day;
    console.log("today");
    console.log(today);
    var monthAgo = ("0" + time.getMonth()).slice(-2);
    var oneMonAgo = time.getFullYear() + "-" + monthAgo + "-" + day;
    if (month == "01") {
      monthAgo = 12;
      var yearAgo = time.getFullYear() - 1;
      oneMonAgo = yearAgo + "-" + monthAgo + "-" + day;
    }
    console.log("oneMonAgo");
    console.log(oneMonAgo);
    //如果日期有效
    if (this.judgeDate(oneMonAgo)) {
      
    } else {
      //2.减去30天
      var ago = new Date(time.getTime() - 30 * 24 * 60 * 60 * 1000); //30天前
      var day = ("0" + ago.getDate()).slice(-2);
      var month = ("0" + (ago.getMonth() + 1)).slice(-2);
      var oneMonAgo = ago.getFullYear() + "-" + month + "-" + day;
      
    }
    this.time = oneMonAgo+'至'+today
    this.time1 = this.time

你可能感兴趣的:(工作中的小问题)