Vant's Calendar calendar component customizes the date interval minDate, maxDate

calendar control
 

      1. The default calendar time range is from the current time to the next 6 months. The calendar range can be customized through min-date and max-date.
      2. After setting type to range, you can select the date range. The date returned by the confirm event is an array structure. The first item in the array is the start time and the second item is the end time.
      3. Allow-same-day can be set to allow the selection of the same day.
      4. After the date is determined, the confirm event is triggered; the date data is obtained.

<template>
  <div>
    <div>
      <van-cell-group border>
        <van-cell
          is-link
          title="选择单个日期"
          :value="date"
          @click="show = true"
          center
        />
      </van-cell-group>
    
      <van-calendar
        v-model="show"
        type="range"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        :allow-same-day="true"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      show: false,
      minDate: new Date(), //日期可选最小值
      maxDate: new Date(), //日期可选最大值
    };
  },
  created() {
    let nowDat = new Date();
    let dateY = nowDat.getFullYear();
    let dateM = nowDat.getMonth();
    let dateD = nowDat.getDate();
    // 设置日期可选最小值minDate、最大值maxDate
    this.minDate = new Date();
    //日历可选范围为一年，dateY + 1
    this.maxDate = new Date(dateY + 1, dateM, dateD);
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      // 日期确定后触发confirm事件；得到日期数据
      // 2022/12/1 - 2022/12/2
      // 2022/11/23 - 2022/11/23
      console.log(this.date);
    },
  },
};
</script>

<style>
</style>