Skip to content
<
年0月
>

使用场景

日历工具可以用于查看日期、农历、节气,也可以作为业务日期选择器的原型参考。

交互流程

mermaid
flowchart LR
    A[打开日历] --> B[切换月份]
    B --> C[选择日期]
    C --> D[查看农历和节气]
    D --> E[业务组件接收选中日期]

扩展方向

  1. 支持日期范围选择。
  2. 支持节假日和工作日标记。
  3. 支持日程、打卡、任务数量等业务徽标。
  4. 支持移动端触摸滑动切换月份。

接入业务时的注意点

  1. 日期值建议统一使用 yyyy-MM-dd,不要在不同页面混用时间戳、中文日期和斜杠日期。
  2. 如果日历只负责选择日期,业务数据不要直接写死在组件内部,应由父组件传入。
  3. 日期格子高度要固定,避免节气、农历、业务标签过多导致布局跳动。
  4. 当前月、非当前月、今天、选中日期要有明确区分。
  5. 如果后续做范围选择,需要处理开始日期大于结束日期、跨月选择、取消选择等边界。

组件边界

日历组件适合负责“日期展示和选择”,不建议直接承担请假、排班、任务统计等业务规则。更合理的方式是由业务页面把需要展示的标记数据整理好,再交给日历组件渲染。

详细说明见 日历工具说明