日历控件
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>
