Calendar 日历

规则

基础示例

Props 配置示例

单日期选择（single）

多日期选择（multiple）

日期区间选择（range）

按月切换模式

限制日期范围

禁用与只读对比

Events 事件示例

监听日期变化

日期范围联动验证

完整配置项:Vant_Calendar

value :String|String[]

Props

参数	说明	类型	默认值
type	选择类型： single 表示选择单个日期， multiple 表示选择多个日期， range 表示选择日期区间	string	single
switch-mode v4.9.0	切换模式： none 平铺展示所有月份，不展示切换按钮， month 支持按月切换，展示上个月/下个月按钮， year-month 支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮	string	none
title	日历标题	string	日期选择
color	主题色，对底部按钮和选中日期生效	string	#1989fa
disabled	是否禁用输入	boolean	false
min-date	可选择的最小日期	Date	switch-mode 为 none 时为当前日期
max-date	可选择的最大日期	Date	switch-mode 为 none 时为当前日期的六个月后
default-date	默认选中的日期，type 为 multiple 或 range 时为数组，传入 null 表示默认不选择	Date | Date[] | null	今天
row-height	日期行高	number | string	64
formatter	日期格式化函数	(day: Day) => Day	-
poppable	是否以弹层的形式展示日历	boolean	true
lazy-render	是否只渲染可视区域的内容	boolean	true
show-mark	是否显示月份背景水印	boolean	true
show-title	是否展示日历标题	boolean	true
show-subtitle	是否展示日历副标题（年月）	boolean	true
show-confirm	是否展示确认按钮	boolean	true
readonly	是否为只读状态，只读状态下不能选择日期	boolean	false
confirm-text	确认按钮的文字	string	确定
confirm-disabled-text	确认按钮处于禁用状态时的文字	string	确定
first-day-of-week	设置周起始日	0-6	0

Events

事件名	说明	回调参数
select	点击并选中任意日期时触发	value: Date | Date[]
confirm	日期选择完成后触发，若 show-confirm 为 true，则点击确认按钮后触发	value: Date | Date[]
open	打开弹出层时触发	-
close	关闭弹出层时触发	-
opened	打开弹出层且动画结束后触发	-
closed	关闭弹出层且动画结束后触发	-
unselect	当日历组件的 type 为 multiple 时，取消选中日期时触发	value: Date
month-show	当某个月份进入可视区域时触发	{ date: Date, title: string }
over-range	范围选择超过最多可选天数时触发	-
click-subtitle	点击日历副标题时触发	event: MouseEvent
click-disabled-date v4.7.0	点击禁用日期时触发	value: Date | Date[]
panel-change	日历面板切换时触发	{ date: Date }