更新记录
1.0.0(2026-02-12) 下载此版本
- 模式切换:顶部 “公历 / 农历” 按钮切换,通过
mode控制数据源。 - 三列联动:年 → 月 → 日,切换年 / 月时自动更新下一列的可选值。
- 农历特殊处理:月份显示为 “正月、冬月、腊月” 等中文名称,日期显示为 “初一、初二…”,并支持闰月。
- 样式还原:顶部按钮、选中高亮、三列滚动选择器。
平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | - | - | - | - | - | - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
uniapp 公历 / 农历切换选择器
uniapp 公历 / 农历切换选择器的核心是用 multiSelector 实现三列联动,并通过切换数据源来切换公历 / 农历模式。
实现思路
- 模式切换:顶部 “公历 / 农历” 按钮切换,通过
mode控制数据源。 - 三列联动:年 → 月 → 日,切换年 / 月时自动更新下一列的可选值。
- 农历特殊处理:月份显示为 “正月、冬月、腊月” 等中文名称,日期显示为 “初一、初二…”,并支持闰月。
- 样式还原:顶部按钮、选中高亮、三列滚动选择器。
关键说明
-
依赖安装
npm install lunar-javascript --save -
联动逻辑:
- 切换年份时,自动更新月份和日期列表。
- 切换月份时,自动更新日期列表,处理农历闰月和公历大小月。
-
返回结果:
- 点击 “确定” 后,会通过
onDateSelected回调将选择结果返回给上一页,包含公历 / 农历模式、年 / 月 / 日及显示文本。
- 点击 “确定” 后,会通过
-
样式还原:
- 顶部 “取消 / 确定” 按钮、模式切换高亮、三列滚动选择器,和截图完全一致。
-
页面结构
- 顶部介绍区:包含文案和头像卡片
- 表单区:姓名输入、性别单选、生日选择(点击唤起选择器)
- 提交按钮:触发报告生成逻辑
- 弹窗选择器:公历 / 农历切换、三列联动选择
-
核心交互
- 点击生日输入框 → 弹出日期选择器
- 选择器内切换公历 / 农历 → 数据源自动更新
- 年 / 月滚动 → 自动联动更新下一列可选值
- 确认选择 → 回填生日文本到表单
核心逻辑说明
手动定义农历映射表
- 在
data中定义lunarMonthMap/lunarDayMap,替代库的工具方法,彻底摆脱版本依赖; - 月份 / 日期的解析通过 “反向映射” 实现,逻辑简单且稳定。
闰月处理优化
- 闰月判断改用
Lunar实例的getLeapMonth()方法(基础方法,所有版本支持); - 闰月标记仍用 “负数”,解析时通过
Math.abs()处理,逻辑不变。
额外兼容保障
- 仅导入
Solar/Lunar两个核心类,不导入任何工具类,避免版本差异导致的方法缺失; - 所有逻辑基于实例方法实现,而非静态工具方法,兼容性拉满。

收藏人数:
下载插件并导入HBuilderX
下载示例项目ZIP
赞赏(0)
下载 74
赞赏 4
下载 11214357
赞赏 1859
赞赏
京公网安备:11010802035340号