Vant Calendar 日历

发布时间：2023-04-19 14:08:48 所属栏目：教程来源：

导读：日历组件用于选择日期或日期区间，2.4 版本开始支持此组件

引入
import Vue from 'vue';
import { Calendar } from 'vant';

Vue.use(Calendar);
选择单个日期
下面演示了结合单元格来使用

日历组件用于选择日期或日期区间，2.4 版本开始支持此组件

引入
import Vue from 'vue';
import { Calendar } from 'vant';

Vue.use(Calendar);
选择单个日期
下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件

<van-cell title="选择单个日期" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />
export default {
data() {
return {
date: '',
show: false
};
},
methods: {
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
this.show = false;
this.date = this.formatDate(date);
}
}
};
选择日期区间
设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

<van-cell title="选择日期区间" :value="date" @click="show = true" />
<van-calendar v-model="show" type="range" @confirm="onConfirm" />
export default {
data() {
return {
date: '',
show: false
};
},
methods: {
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
const [start, end] = date;
this.show = false;
this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
}
}
};
快捷选择
将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件

<van-calendar v-model="show" :show-confirm="false" />
自定义颜色
通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效

<van-calendar v-model="show" color="#07c160" />
自定义日期范围
通过min-date和max-date定义日历的范围

<van-calendar
v-model="show"
:min-date="minDate"
:max-date="maxDate"/>
export default {
data() {
return {
show: false,
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31)
};
}
};
自定义按钮文字
通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字

<van-calendar
v-model="show"
type="range"
confirm-text="完成"
confirm-disabled-text="请选择结束时间"
/>
自定义日期文案
通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar
v-model="show"
type="range"
:formatter="formatter"
/>
export default {
methods: {
formatter(day) {
const month = day.date.getMonth() + 1;
const date = day.date.getDate();

if (month === 5) {
if (date === 1) {
day.topInfo = '劳动节';
} else if (date === 4) {
day.topInfo = '五四青年节';
} else if (date === 11) {
day.text = '今天';
}
}

if (day.type === 'start') {
day.bottomInfo = '入住';
} else if (day.type === 'end') {
day.bottomInfo = '离店';
}

return day;
}
}
}
自定义弹出位置
通过position属性自定义弹出层的弹出位置，可选值为top、left、right

<van-calendar
v-model="show"
:round="false"
position="right"
/>
日期区间最大范围
选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案

<van-calendar
type="range"
:max-range="3"
:style="{ height: '500px' }"
/>
平铺展示
将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现

<van-calendar
title="日历"
:poppable="false"
:show-confirm="false"
:style="{ height: '500px' }"
/>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!