日历工具说明

日历工具适合做日期选择、农历展示、节气展示和业务日期标记。使用时要先区分展示日期、选中日期和业务数据日期。

状态流转

flowchart TD
    A[初始化当前月份] --> B[生成月份格子]
    B --> C[补齐上月和下月日期]
    C --> D[计算农历和节气]
    D --> E[渲染日期面板]
    E --> F[用户选择日期]
    F --> G[向外触发变更]

使用建议

场景	建议
表单选择	只暴露选中日期
日程展示	日期格子上叠加业务标记
范围选择	明确开始和结束状态
移动端	控制格子高度，避免文字拥挤

数据结构建议

一个日期格子通常需要这些字段：

字段	说明
year	年
month	月
day	日
fullTime	展示用日期
valFullTime	标准值，例如 yyyy-MM-dd
inMonth	是否属于当前月份
solarData	农历、节气、节假日信息

组件设计建议

1. 内部维护当前展示月份，向外暴露选中日期。
2. 月份切换和日期选择要分成两个事件。
3. 日期格式要统一，避免父组件收到多种格式。
4. 农历和节假日计算可以封装成独立工具函数。
5. 如果业务标记很多，建议按日期 key 传入映射对象。

常见问题

问题	处理建议
月初前面有空白	用上月日期补齐 7 列布局
月末后面不满一行	用下月日期补齐 6 行或动态行数
日期格式混乱	对外统一输出 yyyy-MM-dd
节假日显示拥挤	移动端只显示一个短标签，详情放到弹层