Calendar 日历组件

文档地址: https://vant-contrib.gitee.io/vant/#/zh-CN/calendar

其基本用法与 Popup 组件, 或 AntdVue 中 Modal 组件的用法类似.

  • 放在页面中, 不占用空间. 激活使用 v-modal:show, 来显示组件 (可设置从哪里弹出).

  • 日期选择的结果利用事件 confirm 的参数进行传递, 使用的数据类型是 Date 原生类型.

语法:

<van-calendar v-modal:show="" @confirm="..."></van-calendar>

image-20240111011050815

image-20240111011116649

常见用法:

  • 属性 type

    • 可选择多个日期, type="multiple", 事件参数为日期数组.

    • 可选择日期范围, type="range", 事件参数是两个元素的数组, 代表起始与结束的时间.

    • 默认值选择一个日期.

  • 快捷选择 :show-confirm="false", 不显示确定按钮, 直接选中后触发 confirm 事件.

  • 自定义颜色, color 属性, 设置选中, 以及按钮的颜色.

  • 定义日期范围: min-date 和 max-date

  • 自定义文字 (略)

  • 自定义每一个日期时间上的文案 (高级, 暂略). 基本逻辑是使用 :formatter="..." 设置一个函数, 为每一天进行设置.

  • 不弹框, 平铺展示. 设置 poppable="false" (设置样式高度)

  • 设置区间最大范围: type="range" 配合 :max-range="3" 来实现.

Last Updated:
Contributors: jk