前言

小徒弟的一个问题,写了一个简单的demo,因为是月份的选择,所以我们直接使用MonthPicker组件进行改造即可;

内容

CodeSandbox

MonthPickerForRange

完整代码

<template>
  <div>
    <a-month-picker
      placeholder="开始日期"
      v-model="startValue"
      :disabled-date="disabledStartDate"
      @openChange="handleStartOpenChange"
    />
    ~
    <a-month-picker
      placeholder="结束日期"
      v-model="endValue"
      :open="endOpen"
      @openChange="handleEndOpenChange"
      :disabled-date="disabledEndDate"
    />
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
    };
  },
  watch: {
    startValue(val) {
      console.log("startValue", val);
    },
    endValue(val) {
      console.log("endValue", val);
    },
  },
  methods: {
    moment,
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      // 未来时间不可选择
      if (startValue.year() > moment().year()) {
        return startValue.month() > -1;
      }

      // 选择当年且endValue有值
      if (startValue.year() === moment().year() && endValue) {
        return (
          startValue.valueOf() > endValue.valueOf() || startValue.month() >= 10
        );
      }

      // 选择当年endValue无值
      if (startValue.year() === moment().year() && !endValue) {
        return startValue.month() >= 10;
      }

      if (!startValue || !endValue) {
        return false;
      }

      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      // 未来时间不可选择
      if (endValue.year() > moment().year()) {
        return endValue.month() > -1;
      }

      // 选择当年startValue有值
      if (endValue.year() === moment().year() && startValue) {
        return (
          startValue.valueOf() >= endValue.valueOf() || endValue.month() >= 10
        );
      }

      // 选择当年startValue无值
      if (endValue.year() === moment().year() && !startValue) {
        return endValue.month() >= 10;
      }

      if (!startValue || !endValue) {
        return false;
      }

      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
  },
};
</script>

效果

Antd——如何自定义月的选择范围