uni-app怎么做签到日历 uni-app自定义日期标记功能-代码

uni-calendar 不支持动态标记签到日期，需严格按 dateInfo 数组格式传入 "YYYY-MM-DD" 字符串及 info/tip 字段，且须手动处理禁用逻辑与状态同步。

uni-app 里怎么用 uni-calendar 标记签到日期

直接说结论：uni-calendar 组件本身不支持动态标记任意日期（比如签到红点、自定义图标），它只接受 dateInfo 数组，且字段名和结构非常固定——漏一个字段或类型不对，标记就消失。别指望靠 CSS 覆盖蒙混过关，它的渲染逻辑是条件判断+插槽控制的。

实操建议：

• dateInfo 必须是数组，每个项必须包含 date（格式为 "YYYY-MM-DD"，不是时间戳，也不是 Date 对象）和 info（字符串，用于右上角小红点）或 tip（底部文字）
• 如果要显示「已签到」图标，info 只能是单字符（如 "✓" 或 "●"），多字会溢出；想显示文字提示，改用 tip
• 组件默认只渲染当前月，跨月标记需确保 date 确实在当前日历视图范围内，否则不会出现

为什么 dateInfo 写了但没显示红点

最常见原因是字段名写错或类型错——比如把 info 写成 text，或者传了数字 1 而不是字符串 "1"。另外，uni-calendar 在 H5 和小程序平台对 dateInfo 的响应时机不同：App 和微信小程序是首次渲染后才读取，H5 可能需要手动触发 setData 或用 v-if 控制重载。

排查步骤：

• 在 console.log 里打印 this.dateInfo，确认数组长度 > 0，且每个对象都有 date 和 info（或 tip）
• 检查 date 值是否为字符串，且符合 "2024-06-15" 格式（注意：不能是 "2024/06/15"）
• 在微信开发者工具中打开 WXML 面板，搜索 calendar-item，看对应日期节点里有没有 data-info 属性

如何让签到日历支持「今天可点、昨天不可点、前天已签」这种交互逻辑

这得自己补逻辑：uni-calendar 不管禁用状态，只管渲染。你需要结合 beforeDate（禁用早于该日期的选项）和 bind:select 事件手动拦截。

关键点：

• beforeDate 接收字符串，比如 "2024-06-10"，表示该日期及之前都不可选；设为 "" 或 null 则不限制
• 在 bind:select 回调里，先判断选中的 e.detail.date 是否在可签到范围内（比如不能是今天之后，也不能是未开始的活动日），再决定是否调用签到接口
• 签到成功后，记得把新日期 push 进 dateInfo 并 this.$forceUpdate()（H5）或重新赋值 dateInfo（小程序）触发重绘

自定义样式时容易忽略的两个坑

一是 .uni-calendar__item 类名在不同端表现不一致：App 端支持伪类 ::after 加签到图标，微信小程序里必须用 slot 或额外 view 包裹；二是字体大小缩放——info 小红点实际是通过 font-size: 12px + line-height: 1 实现的，如果你全局设置了 html { font-size: 14px }，红点会被撑大变形。

稳妥做法：

• 红点统一用 info: "●"，并在组件内联样式加 font-size: 10px; line-height: 1;
• 避免修改 uni-calendar 的根类名，用 scoped style + 深度选择器 :deep(.uni-calendar__item) 控制
• 真要加图标（比如 ✅），别依赖字体，用 slot 插入 <image src="/static/check.png" mode="aspectFit" style="width:12px;height:12px;"></image>

复杂点在于：标记逻辑和禁用逻辑是两套独立状态，得自己维护一个「日期状态映射表」，而不是指望组件自动同步。很多人卡在这一步，不是代码写不对，是状态没理清。