iview日期选择器联动 开始时间结束时间设置禁用

iview日期选择器联动 开始时间结束时间设置禁用

<template>
  <div>
    <DatePicker
      type="month"
      :editable="false"
      :options="startOption"
      v-model="params.planYmStr"
      format="yyyy-MM"
      placeholder="请选择"
      style="max-width: 140px"
      @on-change="startPlanMonthlyChange"
    ></DatePicker>

    <DatePicker
      type="month"
      :editable="false"
      :options="endOption"
      v-model="params.planYmEnd"
      format="yyyy-MM"
      style="max-width: 140px"
      placeholder="请选择"
      @on-change="endPlanMonthlyChange"
    ></DatePicker>
  </div>
</template>

export default {
  data() {
    return {
      startOption: {
        disabledDate: (date) => {
          const endTime = new Date(this.params.planYmEnd).valueOf();
          const startTime =
            new Date(this.params.planYmEnd).valueOf() -
            300 * 24 * 60 * 60 * 1000;
          return (
            (date && date.valueOf() >= endTime) || date.valueOf() <= startTime
          );
        },
      },
      endOption: {
        disabledDate: (date) => {
          const startTime =
            new Date(this.params.planYmStr).valueOf() - 1 * 24 * 60 * 60 * 1000;
          const endTime =
            new Date(this.params.planYmStr).valueOf() +
            300 * 24 * 60 * 60 * 1000;
          return (
            (date && date.valueOf() < startTime) || date.valueOf() >= endTime
          );
        },
      },
      params: {
        planYmEnd: "",
        planYmStr: "",
      },
    };
  },
  methods: {
    startPlanMonthlyChange(time) {
      this.params.planYmStr = time;
    },
    endPlanMonthlyChange(time) {
      this.params.planYmEnd = time;
    },
    add() {
      // 清空年月的置灰
      this.startPlanMonthlyChange();
      this.endPlanMonthlyChange();
    },
  },
};
</script>