日历控件
1.默认日历时间范围是当前时间到往后的6个月,可通过 min-date 和 max-date 自定义日历的范围。
2.设置 type 为 range 后可以选择日期区间,confirm 事件返回的 date 为数组结构,数组第一项为开始时间,第二项为结束时间。
3.可设置allow-same-day 允许选择同一天。
4.日期确定后触发confirm事件;得到日期数据。文章来源地址https://www.toymoban.com/news/detail-554938.html
<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>
文章来源:https://www.toymoban.com/news/detail-554938.html
到了这里,关于Vant 的 Calendar 日历组件 自定义日期区间minDate、maxDate的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!