The MonthPicker and DatePicker of antd start at any time, and the maximum span of the selected continuous time is 1 year. disabledDate is a date that cannot be selected.

Problem description:

For the date component, select the start of the month at any time, but you must select consecutive months within a year! ! !

Achieve results

Solution

Insert code snippet here
<div style="display: flex">
     <a-month-picker
        v-model="form.startValue"
        placeholder="Start"
        @openChange="handleStartOpenChange"
      />
      <a-month-picker
        v-model="form.endValue"
        :disabled-date="disabledEndDate"
        placeholder="End"
        :open="endOpen"
        @openChange="handleEndOpenChange"
      />
</div>
import dayjs from "dayjs";
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
endOpen: false,
form: {<!-- -->
startValue: null,
endValue: null,
},
}
},
watch: {<!-- -->
    'form.startValue'(val) {<!-- -->
    // Monitor and process the end time limit when clicking on the mask layer to close the pop-up box.
      let {<!-- --> startValue,endValue } = this.form
      let startY = dayjs(startValue).year()
      let startM = dayjs(startValue).month()
      let endY = dayjs(endValue).year()
      let endM = dayjs(endValue).month()
      if((startY == endY & amp; & amp; endM >= startM) || (endY - startY == 1 & amp; & amp; endM < startM)){<!-- -->
      }else{<!-- -->
        this.form.endValue=val
      }
    },
  },
methods: {<!-- -->
// disabledStartDate(startValue) {<!-- -->
// let {<!-- --> endValue } = this.form
// if (!startValue || !endValue) {<!-- -->
// return false;
// }
// return startValue.valueOf() > endValue.valueOf();
// },

disabledEndDate(endValue) {<!-- -->
let {<!-- --> startValue } = this.form
if (!endValue || !startValue) {<!-- -->
return false;
}
\t\t
//Method 1: Get the year and month separately to compare
let startY = dayjs(startValue).year()
let startM = dayjs(startValue).month()
let endY = dayjs(endValue).year()
let endM = dayjs(endValue).month()
\t
let flag = true
if ((startY == endY & amp; & amp; endM >= startM) || (endY - startY == 1 & amp; & amp; endM < startM)) {<!-- -->
flag = false
} else {<!-- -->
flag = true
}
return flag
\t
//Method 2: Add 1 year to the start time, no more than 1 year and no less than the start time
// Later, I also wrote a time selection range that is accurate to hours, minutes and seconds. After testing, this solution is more accurate.
// var dateTime = new Date(startValue);
// dateTime = dateTime.setYear(dateTime.getFullYear() + 1);
// dateTime = new Date(dateTime);
// return startValue.valueOf() >= endValue.valueOf()
// || endValue.valueOf() >= dateTime.valueOf()
},
\t
\t
handleStartOpenChange(open) {<!-- -->
if (!open) {<!-- -->
this.endOpen = true;
}
},
handleEndOpenChange(open) {<!-- -->
this.endOpen = open;
},
},
}

Add a case that is accurate to hours, minutes and seconds (the longest continuous selection is 12 months). Under the same year, month and day, it is guaranteed that the end time, hours, minutes and seconds is greater than the start time

 <div style="display: flex; margin: 6px 0 0 0">
        <a-date-picker
          style="width: 250px"
          show-time
          v-model="form.startValue"
          placeholder="Start"
          @openChange="handleStartOpenChange"
          :allowClear="false"
          :disabled-date="disabledStartDate"
        />
        <a-date-picker
          style="width: 250px"
          show-time
          v-model="form.endValue"
          :disabled-date="disabledEndDate"
          placeholder="End"
          :open="endOpen"
          @openChange="handleEndOpenChange"
          :allowClear="false"
        />
      </div>
import dayjs from "dayjs";
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
endOpen: false,
//Set the default time 30 days ago-now
form: {<!-- -->
startValue: dayjs().subtract(30, 'day').format('YYYY-MM-DD HH:mm:ss'),
        endValue: dayjs().format('YYYY-MM-DD HH:mm:ss'),
},
}
},
watch: {<!-- -->
// Monitor and process the end time limit when clicking on the mask layer to close the pop-up box.
// Directly compare time sizes
'form.startValue'(val) {<!-- -->
\t      // method 1
// let {<!-- --> startValue, endValue } = this.form
// var formatDate1 = new Date(startValue)
// var formatDate2 = new Date(endValue)
// if (formatDate1 >= formatDate2) {<!-- -->
// this.form.endValue = val
// }
// Method 2
if(dayjs(startValue).isAfter(dayjs(endValue))){<!-- -->
this.form.endValue = val
}
},
},
methods: {<!-- -->
disabledStartDate(startValue) {<!-- -->
},
\t
disabledEndDate(endValue) {<!-- -->
let {<!-- --> startValue } = this.form
if (!endValue || !startValue) {<!-- -->
return false;
}
var dateTime = new Date(startValue);
dateTime = dateTime.setYear(dateTime.getFullYear() + 1);
dateTime = new Date(dateTime);
return startValue.valueOf() >= endValue.valueOf()
|| endValue.valueOf() >= dateTime.valueOf()
},
\t\t
\t\t
handleStartOpenChange(open) {<!-- -->
if (!open) {<!-- -->
this.endOpen = true;
}
},
handleEndOpenChange(open) {<!-- -->
this.endOpen = open;
},
},
}

Some random examples of dayjs moment that Baidu already knows. I guess the usage is similar, so just take a look at it

Regarding the time method, I have never learned much about it before. It turns out that there are many useful APIs.
moment interprets common operations and statements – subtract, add, calendar
In the future it will be add, in the past it was subtract, now it is moment(), calendar format.
Example of chain operation: moment().add(7, days’).subtract(1, months’) // It means adding 7 days to the current date and subtracting one month. The hours, minutes and seconds are consistent with the current date.

Is Before
This indicates whether the Day.js object precedes another provided date-time.
dayjs().isBefore(dayjs(2011-01-01’)) // Default milliseconds

Is Same
This indicates whether the Day.js object is the same as another provided datetime.
dayjs().isSame(dayjs(2011-01-01’)) // Default milliseconds

Is After
This indicates whether the Day.js object is after another provided date-time.
dayjs().isAfter(dayjs(2011-01-01’)) // Default milliseconds

Is Same or Before
This indicates whether the Day.js object is the same as or before another provided datetime.
This relies on the IsSameOrBefore plugin to function properly
dayjs.extend(isSameOrBefore)
dayjs().isSameOrBefore(dayjs(2011-01-01’)) // Default milliseconds

Is Same or After
This indicates whether the Day.js object is the same as or after another provided datetime.
This relies on the IsSameOrAfter plugin to function properly
dayjs.extend(isSameOrAfter)
dayjs().isSameOrAfter(dayjs(2011-01-01’)) // Default milliseconds

Is Between
This indicates whether the Day.js object is between the datetimes of the other two.
This relies on the IsBetween plugin to function properly
dayjs.extend(isBetween)
dayjs(2010-10-20’).isBetween(2010-10-19’, dayjs(2010-10-25’))

For the above API, if you want to use units other than milliseconds for comparison, pass in the unit as the second parameter.
dayjs().isSameOrBefore(2011-01-01’, year’)

Is a Day js
This indicates whether a variable is a Day.js object.
dayjs.isDayjs(dayjs()) // true
dayjs.isDayjs(new Date()) // false

Is Leap Year
Query whether the year of the Day.js object is a leap year.
This relies on the IsLeapYear plug-in to function properly
dayjs.extend(isLeapYear)
dayjs(2000-01-01’).isLeapYear() // true

As I write this, I find that reading more documents is better than blindly searching on Baidu. I suddenly discovered a simpler method and wasted time!

//For example, the above code
let {<!-- --> startValue,endValue } = this.form
      let startY = dayjs(startValue).year()
      let startM = dayjs(startValue).month()
      let endY = dayjs(endValue).year()
      let endM = dayjs(endValue).month()
      if((startY == endY & amp; & amp; endM >= startM) || (endY - startY == 1 & amp; & amp; endM < startM)){<!-- -->
      }else{<!-- -->
        this.form.endValue=val
      }
//Modify directly to
 if(dayjs(startValue).isAfter(dayjs(endValue),'month')){<!-- -->
this.form.endValue = val
}