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

日历控件

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

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、最大值maxDatethis.minDate = new Date();//日历可选范围为一年，dateY + 1this.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/23console.log(this.date);},},};