日历控件是一种用于用户选择特定日期或日期范围的交互式工具,该组件自2.4版本起正式加入我们的产品系列中。
以下将详细展示如何将日历组件与单元格进行有效结合,并说明在完成日期选择后系统会自动触发confirm事件进行响应处理。
当我们将type属性设置为multiple时,用户便可以同时选择多个日期,此时confirm事件所返回的date参数将呈现数组结构,其中包含了所有被选中的日期信息。
若将type属性设定为range,用户则能够选择一个日期区间,这种情况下confirm事件同样返回数组类型的数据,数组的第一个元素代表起始日期,第二个元素则表示结束日期。
通过将show-confirm属性设为false,用户可以隐藏确认按钮的功能,这种设置下一旦完成日期选择,系统将立即触发confirm事件进行后续处理。
color属性允许开发者自定义日历的整体色调,这一设置将同时影响已选中日期的显示效果以及底部按钮的视觉呈现。
使用min-date和max-date属性可以精确设定日历允许选择的日期范围。
confirm-text属性用于自定义按钮上的文字内容,而confirm-disabled-text属性则控制按钮在禁用状态下的显示文本。
通过传入formatter函数,开发者可以对日历中每一个单元格的内容进行个性化格式化处理。
position属性提供了灵活的布局选项,允许用户自定义弹出层的显示位置,可选值包括top、left和right。
在日期区间选择模式下,max-range属性可用于限制用户最多可以选择的天数,如果所选范围超出最大允许天数,系统将弹出相应的提示信息。
将poppable属性设置为false后,日历将直接嵌入页面中显示,而非以弹层形式呈现。
参数说明类型默认值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确定
当 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-
当 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
当 Canlendar 的 type 为 multiple 时,支持以下 props:
参数说明类型默认值max-range v2.7.2日期最多可选天数number | string无限制range-prompt v2.4.3选择超过最多可选天数时的提示文案string选择天数不能超过 xx 天
日历中的每个日期都对应一个 Day 对象,通过formatter属性可以自定义 Day 对象的内容
键名说明类型date日期对应的 Date 对象Datetype日期类型,可选值为selected、start、middle、end、disabledstringtext中间显示的文字stringtopInfo上方的提示信息stringbottomInfo下方的提示信息stringclassName额外类名string
事件名说明回调参数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 }
名称说明title自定义标题footer自定义底部区域内容
通过 ref 可以获取到 Calendar 实例并调用实例方法,详见组件实例方法
方法名说明参数返回值reset重置选中的日期到默认值–
如果你遇到了在 iOS 上无法渲染组件的问题,请确认在创建 Date 对象时没有使用new Date(‘2020-01-01’)这样的写法,iOS 不支持以中划线分隔的日期格式,正确写法是new Date(‘2020/01/01’)。