Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate

日历控件

  1.默认日历时间范围是当前时间到往后的6个月，可通过 min-date 和 max-date 自定义日历的范围。
   2.设置 type 为 range 后可以选择日期区间,confirm 事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。
   3.可设置allow-same-day 允许选择同一天。
   4.日期确定后触发confirm事件；得到日期数据。

<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>