elementUI 日期范围设置结束日期范围

发布时间 2023-06-15 17:23:34作者: 浅悠

1、主要使用pickerOptions的onPick属性

          <el-date-picker
            v-model="addForm.gwmDate"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
export default {
   data(){
      //结束日期只能选择当天及以后
      pickerMinDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate;
          if (maxDate) {
            this.pickerMinDate = null;
          }
        },
        disabledDate: (time) => {
          // 这里可以根据自己的需求来改结束日期的可选范围
          if (this.pickerMinDate) {
            return time.getTime() < Date.now() - 8.64e7; // 一天的毫秒数为 8.64e7
          }
          return false
        },
      },
  }  
}