介绍
日历组件用于选择日期或日期区间,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为multiple后可以选择多个日期,此时confirm事件返回的 date 为数组结构,数组包含若干个选中的日期。
<van-cell title="选择多个日期" :value="text" @click="show = true" />
<van-calendar v-model="show" type="multiple" @confirm="onConfirm" />
export default {
data() {
return {
text: '',
show: false,
};
},
methods: {
onConfirm(date) {
this.show = false;
this.text = `选择了 ${date.length} 个日期`;
},
},
};
选择日期区间
设置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' }"
/>
API
Props
参数说明类型默认值type v2.5.4选择类型:
single表示选择单个日期,
multiple表示选择多个日期,
range表示选择日期区间stringsingletitle日历标题string日期选择color主题色,对底部按钮和选中日期生效string#ee0a24min-date可选择的最小日期Date当前日期max-date可选择的最大日期Date当前日期的六个月后default-date默认选中的日期,type为multiple或range时为数组Date | Date[]今天row-height日期行高number | string64formatter日期格式化函数(day: Day) => Day-poppable是否以弹层的形式展示日历booleantruelazy-render v2.8.1是否只渲染可视区域的内容booleantrueshow-mark是否显示月份背景水印booleantrueshow-title v2.5.5是否展示日历标题booleantrueshow-subtitle v2.5.5是否展示日历副标题(年月)booleantrueshow-confirm是否展示确认按钮booleantrueconfirm-text确认按钮的文字string确定confirm-disabled-text确认按钮处于禁用状态时的文字string确定
Poppable Props
当 Canlendar 的 poppable 为 true 时,支持以下 props:
参数说明类型默认值v-model是否显示日历弹窗booleanfalseposition弹出位置,可选值为 top right leftstringbottomround是否显示圆角弹窗booleantrueclose-on-popstate v2.4.4是否在页面回退时自动关闭booleanfalseclose-on-click-overlay是否在点击遮罩层后关闭booleantruesafe-area-inset-bottom是否开启底部安全区适配booleantrueget-container v2.4.4指定挂载的节点,用法示例string | () => Element-
Range Props
当 Canlendar 的 type 为 range 时,支持以下 props:
参数说明类型默认值max-range v2.4.3日期区间最多可选天数number | string无限制range-prompt v2.4.3范围选择超过最多可选天数时的提示文案string选择天数不能超过 xx 天allow-same-day v2.5.6是否允许日期范围的起止时间为同一天booleanfasle
Multiple Props
当 Canlendar 的 type 为 multiple 时,支持以下 props:
参数说明类型默认值max-range v2.7.2日期最多可选天数number | string无限制range-prompt v2.4.3选择超过最多可选天数时的提示文案string选择天数不能超过 xx 天
Day 数据结构
日历中的每个日期都对应一个 Day 对象,通过formatter属性可以自定义 Day 对象的内容
键名说明类型date日期对应的 Date 对象Datetype日期类型,可选值为selected、start、middle、end、disabledstringtext中间显示的文字stringtopInfo上方的提示信息stringbottomInfo下方的提示信息stringclassName额外类名string
Events
事件名说明回调参数select点击并选中任意日期时触发value: Date | Date[]confirm日期选择完成后触发,若show-confirm为true,则点击确认按钮后触发value: Date | Date[]open v2.5.2打开弹出层时触发-close v2.5.2关闭弹出层时触发-opened v2.5.2打开弹出层且动画结束后触发-closed v2.5.2关闭弹出层且动画结束后触发-unselect v2.7.2当日历组件的 type 为 multiple 时,取消选中日期时触发value: Datemonth-show v2.8.2当某个月份进入可视区域时触发{ date: Date, title: string }
Slots
名称说明title自定义标题footer自定义底部区域内容
方法
通过 ref 可以获取到 Calendar 实例并调用实例方法,详见组件实例方法
方法名说明参数返回值reset重置选中的日期到默认值--
常见问题
在 iOS 系统上初始化组件失败?
如果你遇到了在 iOS 上无法渲染组件的问题,请确认在创建 Date 对象时没有使用new Date('2020-01-01')这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是new Date('2020/01/01')。