小程序 日历选择 支持前后月份切换
效果图:
1. 基本显示功能
- 动态生成日历:组件会根据当前所选的年份和月份,自动计算该月的总天数、第一天是星期几等信息,进而生成完整的日历网格。日历网格会填充上月末尾、本月和下月开头的日期,确保显示为 42 个格子,以呈现完整的 6 行布局。
- 日期标记:
- 今天:当前日期会以蓝色背景突出显示,方便用户快速定位当天日期。
- 过去日期:过去的日期会显示为灰色,并且鼠标指针变为禁止状态,提示用户这些日期不可选择。
- 选中日期:用户选择的日期会以橙色背景突出显示,方便用户识别已选日期。
2. 月份切换功能
- 上月切换:用户点击日历标题栏左侧的左箭头(
<
),可以切换到上一个月的日历显示。如果当前显示的是 1 月,点击后会切换到上一年的 12 月。 - 下月切换