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

参考文档

https://wuui.cn/zh-CN/components/calendar.html

Views: 4 · Posted: 2025-08-04

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh