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: 136 · Posted: 2025-08-04

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

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