This article is based on Ant Design [email protected] version, other versions can refer to ideas

Design requirements

Select a range date that meets the following criteria

  1. You can only choose the time before today
  2. The maximum time range is 31 days

Code implementation

No more nonsense, directly on the code, demo code implementation is as follows:

<template>
  <div id="app">
    <a-range-picker
      v-model="value"
      :valueFormat="NORMAL_DATE"
      :disabledDate="disabledFn"
      @calendarChange="calendarChange"
    />
  </div>
</template>
<script>
import dayjs from "dayjs";
const NORMAL_DATE = "YYYY-MM-DD";
export default {
  name: "App".data() {
    return {
      NORMAL_DATE,
      disabledFn: this.disabledDate, // Dynamically update the disabled function
      value: []}; },methods: {
    disabledDate(current) {
      // You can only select the time before today
      return! (current && current < dayjs().startOf("day"));
    },
    calendarChange([begin]) {
      // The start time of the first selection
      begin = dayjs(begin, NORMAL_DATE);
      // 31 days before the start time
      const before31 = begin.add(-31."day").endOf('day');
      // 31 days after the start time
      const end31 = begin.add(31."day").startOf('day');

      this.disabledFn = current= > {
        // All dates not in the following range are disabled
        return! ( current &&// Select a date before today
          current < dayjs().startOf("day") &&
          // Select a date 31 days after the start time
          current.valueOf() >= before31.valueOf() &&
          // Select a date before 31 days after the start timecurrent.valueOf() <= end31.valueOf() ); }; }}};</script>
Copy the code

Implementation approach

The a-range-Picker component provides a limited API, so the calendarChange event is used to modify the component’s disabled behavior.

  • When you select the start time, the default disabledDate behavior is that you can only select the time before today
  • When you select the end time, you can modify disabledDate to enable the selected time range to be within 31 days of the start time and to allow you to select only the time before today

Testing capabilities

  • ✅ reached the standard, select the start time, only select the date before today (March 1)

  • ✅ has reached the standard. The start time is January 20, the end time is 31 days before the start time, and the boundary is December 21

  • ✅ has reached the standard. The start time is January 20, and the end time is 31 days after the start time. The boundary is February 19

  • ✅ has reached the standard, the start time is February 10th, the end time is 31 days before the start time, and the boundary is January 11th. You can select 31 days after the start time, and you can only select dates before today (March 1). The boundary is February 28

conclusion

You can dynamically modify the disabledDate function attribute of the component using the calendarChange provided by the component to enable the disabled behavior of the start time and end time to meet the final requirements.