Calendar 日历

规则

日期选择

{
    type: 'calendar',
    title: '日期选择',
    field: 'Calendar1',
    value: '2024-06-11',
    props: {
        placeholder: '请选择',
    }
}

日期多选

{
    type: 'calendar',
    title: '日期多选',
    field: 'Calendar2',
    value: ['2024-06-11', '2024-07-11', '2024-07-12'],
    props: {
        type: 'multiple',
        placeholder: '请选择',
        minDate: '2024-06-10'
    },
}

日期区间选择

{
    type: 'calendar',
    title: '日期区间',
    field: 'Calendar3',
    value: ['2024-06-11', '2024-07-11'],
    props: {
        type: 'range',
        placeholder: '请选择'
    }
}

参考: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 }

Calendar 日历 ​

规则 ​

Props ​

Events ​

Calendar 日历

规则

Props

Events