uni-app wu-calendar 基本使用
uni-app wu-calendar About 3,245 words组件属性
属性名 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
date | 自定义默认选中时间,默认为今天,mode="multiple"或"range"时,该值需为数组,mode="single",该值为字符串 | String | 今天的日期 | - |
mode | 日期选择类型 | String | single | single-单日期 / multiple-多日期 / range-日期范围选择 |
type(1.3.0) | 日历类型 | String | month | month-月日历 / week-周日历 |
fold(1.3.0) | 是否支持折叠 | Boolean | month: true, week: false | true / false |
startWeek(1.3.0) | 日历以周几开始 | String | sun | sun-周日 / mon-周一 |
maskClick | 是否点击遮罩层关闭 | Boolean | false | true / false |
useToday | 是否使用默认日期(今天) | Boolean | true | true / false |
todayDefaultStyle(1.5.6) | 是否显示今日默认样式 | Boolean | true | true / false |
lunar | 是否显示农历日期 | Boolean | false | true / false |
monthShowCurrentMonth | 每月是否仅显示当月数据 | Boolean | false | true / false |
rangeSameDay | 日期选择范围起始为同一天 | Boolean | false | true / false |
rangeEndRepick | 选择完成后点击选择范围的日期内来重选结束日期 | Boolean | false | true / false |
rangeHaveDisableTruncation(1.3.1) | 日期选择范围内遇到打点禁用日期进行截断 | Boolean | false | true / false |
startDate | 日期范围选择-开始日期 | String | - | - |
endDate | 日期范围选择-结束日期 | String | - | - |
insert | 插入模式,true: 插入模式; false: 弹窗模式 | Boolean | true | true / false |
slideSwitchMode | 滑动切换模式 | String | horizontal | horizontal/ vertical / none |
showMonth | 是否显示月份为背景 | Boolean | true | true / false |
clearDate | 弹窗模式是否清空上次选择内容 | Boolean | true | true / false |
disabledChoice | 是否禁止点击日历 | Boolean | false | true / false |
selected | 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}] | Array[Object] | - | 查看下文自定义日期内容属性,Selected Options参数详情 |
color | 自定义主题色 | String | #3c9cff | - |
itemHeight(1.3.7) | 日历中每项日期的高度,单位px | Number | 64 | - |
cancelColor | 取消文字的颜色 | String | #333333 | - |
confirmColor | 确定文字的颜色 | String | #333333 | - |
startText | mode=range时,第一个日期底部的提示文字 | String | 开始 | - |
endText | mode=range时,最后一个日期底部的提示文字 | String | 结束 | - |
actBadgeColor(1.4.6) | 当通过 selected 属性设置某个日期 badgeColor后,如果该日期被选择且主题色与 badgeColor 一致时,徽标会显示本颜色 | String | #fff | - |
operationPosition(1.4.7) | 弹窗日历取消和确认按钮的显示位置 | String | top | top / bottom |
confirmFullDate(1.5.0) | 弹窗日历确认按钮点击时是否需要选择完整日期 | Boolean | false | true / false |
自定义日期内容属性
selected
属性可以设置多个日期,类型为Array[Object]
。
{
"date": "2025-07-21",
"info": "未签到",
"infoColor": "#e43d33",
"topInfo": "上方文案",
"topInfoColor": "#e43d33",
"badge": true,
"badgeColor": "#e43d33",
"badgePosition": "top-right"
"disable": false
}
selected
属性
属性名 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
date | 日期,格式: YYYY-mm-dd | String | - | - |
info | 下方文案 | String | - | - |
infoColor | 下方文案颜色 | String | #e43d33 | - |
topInfo | 上方文案 | String | - | - |
topInfoColor | 上方文案颜色 | String | #e43d33 | - |
badge | 是否显示圆点 | Boolean | false | true / false |
badgeColor(1.4.5) | 圆点颜色 | String | #e43d33 | - |
badgeSize(1.3.0) | 圆点大小 | String | 16rpx | - |
badgePosition | 圆点显示的位置 | String | top-right | top-left / top-center / top-right / bottom-left / bottom-center / bottom-right |
disable | 是否禁用 | Boolean | false | true / false |
组件事件
事件名 | 说明 | 返回参数 |
---|---|---|
close | 点击日历弹窗遮罩层触发关闭时触发 | - |
cancel(1.4.5) | insert 为 false 时,点击取消按钮时触发 | - |
confirm | insert 为 false 时,点击确认按钮时触发 | 返回日期相关参数 |
change | insert 为 true 时,选择日期时触发 | 返回日期相关参数 |
monthSwitch | 切换月份时触发 | {year, month, fullDate} |
foldSwitch(1.3.0) | 切换折叠状态时触发 | {type, status} |
组件插槽
插槽名 | 说明 |
---|---|
header | 日历头部自定义插槽 |
operation | 弹窗日历取消和确认按钮插槽 |
v-slot:header
值名称 | 说明 |
---|---|
nowDate | 目前所在月份时间数据 |
组件方法
方法名 | 说明 |
---|---|
open | insert 为 false 时,调用此方法弹出日历组件 |
close | insert 为 false 时,调用此方法关闭日历组件 |
reset(1.4.5) | 重置日历数据 |
clearSelect(1.5.6) | 清除日历选择 |
插件地址
https://ext.dcloud.net.cn/plugin?id=14157
参考文档
Views: 4 · Posted: 2025-08-04
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓

Loading...