更新记录

1.0.0(2026-02-12) 下载此版本

  1. 模式切换:顶部 “公历 / 农历” 按钮切换,通过 mode 控制数据源。
  2. 三列联动:年 → 月 → 日,切换年 / 月时自动更新下一列的可选值。
  3. 农历特殊处理:月份显示为 “正月、冬月、腊月” 等中文名称,日期显示为 “初一、初二…”,并支持闰月。
  4. 样式还原:顶部按钮、选中高亮、三列滚动选择器。

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× ×

uniapp 公历 / 农历切换选择器

uniapp 公历 / 农历切换选择器的核心是用 multiSelector 实现三列联动,并通过切换数据源来切换公历 / 农历模式。


实现思路

  1. 模式切换:顶部 “公历 / 农历” 按钮切换,通过 mode 控制数据源。
  2. 三列联动:年 → 月 → 日,切换年 / 月时自动更新下一列的可选值。
  3. 农历特殊处理:月份显示为 “正月、冬月、腊月” 等中文名称,日期显示为 “初一、初二…”,并支持闰月。
  4. 样式还原:顶部按钮、选中高亮、三列滚动选择器。

关键说明

  1. 依赖安装

    npm install lunar-javascript --save
  2. 联动逻辑:

    • 切换年份时,自动更新月份和日期列表。
    • 切换月份时,自动更新日期列表,处理农历闰月和公历大小月。
  3. 返回结果:

    • 点击 “确定” 后,会通过 onDateSelected 回调将选择结果返回给上一页,包含公历 / 农历模式、年 / 月 / 日及显示文本。
  4. 样式还原:

    • 顶部 “取消 / 确定” 按钮、模式切换高亮、三列滚动选择器,和截图完全一致。
  5. 页面结构

    • 顶部介绍区:包含文案和头像卡片
    • 表单区:姓名输入、性别单选、生日选择(点击唤起选择器)
    • 提交按钮:触发报告生成逻辑
    • 弹窗选择器:公历 / 农历切换、三列联动选择
  6. 核心交互

    • 点击生日输入框 → 弹出日期选择器
    • 选择器内切换公历 / 农历 → 数据源自动更新
    • 年 / 月滚动 → 自动联动更新下一列可选值
    • 确认选择 → 回填生日文本到表单

核心逻辑说明

手动定义农历映射表

  • data 中定义 lunarMonthMap/lunarDayMap,替代库的工具方法,彻底摆脱版本依赖;
  • 月份 / 日期的解析通过 “反向映射” 实现,逻辑简单且稳定。

闰月处理优化

  • 闰月判断改用 Lunar 实例的 getLeapMonth() 方法(基础方法,所有版本支持);
  • 闰月标记仍用 “负数”,解析时通过 Math.abs() 处理,逻辑不变。

额外兼容保障

  • 仅导入 Solar/Lunar 两个核心类,不导入任何工具类,避免版本差异导致的方法缺失;
  • 所有逻辑基于实例方法实现,而非静态工具方法,兼容性拉满。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议