Element时间选择器禁用时间（moment）

效果图：

                  

好了，开始贴代码

 <el-form label-width="60px">
      <el-form-item label="日期" style="text-align: left">
        <el-date-picker
          v-model="queryForm.fromDate"
          type="date"
          placeholder="选择开始日期"
          :clearable="false"
          :editable="false"
          :picker-options="startTime"
        >
        </el-date-picker>
        <span style="margin: 0 5px">~</span>
        <el-date-picker
          v-model="queryForm.toDate"
          type="date"
          placeholder="选择结束日期"
          :clearable="false"
          :editable="false"
          :picker-options="endTime"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>

js部分

import moment from "moment";
const EmptyForm = () => {
  return {
    fromDate: moment().subtract(2, "days").format("YYYY-MM-DD"),
    toDate: moment().subtract("days").format("YYYY-MM-DD"),
  };
};
export default {
    data() {
        const that = this;
        return {
          queryForm: EmptyForm(),
          startTime: {
            disabledDate(time) {
              return time.getTime() > moment(that.queryForm.toDate).valueOf();
            },
          },
          endTime: {
            disabledDate(time) {
              return time.getTime() < moment(that.queryForm.fromDate).valueOf();
            },
          },
        };
      },
}

无多余事件触发函数，日期选择无法清空，所以禁用范围配置直接一行return即可，如果时间范围可清空，则禁用配置中需做判断。

import moment from "moment";
const EmptyForm = () => {
  return {
    fromDate: moment().subtract(2, "days").format("YYYY-MM-DD"),
    toDate: moment().subtract("days").format("YYYY-MM-DD"),
  };
};
export default {
  data() {
    const that = this;
    return {
      queryForm: EmptyForm(),
      startTime: {
        disabledDate: time => (this.queryForm.endDate
            ? time.getTime() > new Date(this.queryForm.endDate).getTime()
            : false),
      },
      endTime: {
        disabledDate: time => (this.queryForm.fromDate
            ? time.getTime() < new Date(this.queryForm.fromDate).getTime()
            : false),
      },
    };
  },
};