element ui 的picker-option 30天前限制和30天后限制

发布时间 2023-09-26 16:20:09作者: 小白字太白
pickerOptionsStart:{
        disabledDate:(time)=> {
         // 获取当前日期并减少30天
        //  console.log(time,'..........tiem');
        //  console.log(time,'..........tiem');
         if (this.endDate!='') {
          // console.log(this.endDate,'..........this.endDate');
          const currentDate =new Date(this.endDate); 
          // console.log(currentDate,'..........currentDate');
          currentDate.setDate(currentDate.getDate() - 30);

          // 比较当前日期与要比较的日期是否不在范围内
          return time.getTime() < currentDate.getTime() || time.getTime() > currentDate.getTime() + 30 * 24 * 60 * 60 * 1000;
         }
         
        
        },
      },
      pickerOptionsEnd:{
        disabledDate:(time)=> {
         // 获取当前日期并减少30天
         if (this.startDate!='') {
          const currentDate = new Date(this.startDate);
          currentDate.setDate(currentDate.getDate() + 30);

          // 比较当前日期与要比较的日期是否不在范围内
          return time.getTime() > currentDate.getTime() || time.getTime() < currentDate.getTime() - 30 * 24 * 60 * 60 * 1000;
         }
         
        
        },
      }
 :picker-options="pickerOptionsStart"

 :picker-options="pickerOptionsEnd"
 <date-picker
                  v-model="startDate"
                  :dateWidth="200"
                  @dateChange="onStartDate($event)"
                  :picker-options="pickerOptionsStart"
                ></date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1">至</el-col>
            <el-col :span="7">
              <el-form-item prop="endDate">
                <date-picker
                  v-model="endDate"
                  :dateWidth="200"
                  @dateChange="onEndDate($event)"
                  :picker-options="pickerOptionsEnd"
                ></date-picker>