更新记录

1.0.0（2026-01-19） 下载此版本

公历/农历日期时间选择器发布，欢迎大家下载使用

平台兼容性

uni-app(4.87)

DateTimePicker 组件

项目简介

基于 UniApp 和 Vue2 开发的多功能日历组件，支持农历与公历日期选择，适用于移动端跨平台应用开发。提供了一个轻量、易用、功能完整的日期选择器，支持农历显示与切换，满足中国传统节日和生日等场景需求。

功能特性

• 公历/农历双模式日期选择
• 年、月、日、时、分五级联动选择
• 农历与公历自由切换
• 自定义最小/最大年份范围
• 默认值初始化配置
• 支持时间戳输出
• 返回农历文本及数字格式日期
• 可控制是否启用农历公历切换功能

技术栈

• 前端框架: UniApp + Vue2
• UI 框架: 原生 UniApp 组件
• 工具库: dayjs（用于时间处理）
• 编程语言: JavaScript、Vue Template

安装使用

1. 安装依赖

npm install

2. 在项目中使用组件

<template>
  <view>
    <better-calendar-custom
      ref="calendarRef"
      :showCalendar="showCalendarPicker"
      :initialDatetime="userArchive.birthTime"
      @confirmed-and-ready="onConfirmBirthTime"
      @cancel="showCalendarPicker = false"
    />
  </view>
</template>

<script>
import BetterCalendarCustom from '@/components/better-calendar-custom/index.vue';

export default {
  components: {
    BetterCalendarCustom
  },
  data() {
    return {
      showCalendarPicker: false,
      userArchive: {
        birthTime: null
      }
    }
  },
  methods: {
    onConfirmBirthTime(dateInfo) {
      console.log('选择的日期信息:', dateInfo);
      // 处理选中的日期
      this.showCalendarPicker = false;
    }
  }
}
</script>

组件属性

事件

日期信息对象字段

选中的日期信息对象包含以下字段：

• type: 日期类型 ("solar"-公历, "lunar"-农历)
• Animal: 生肖
• astro: 星座
• ncWeek: 农历星期
• nWeek: 数字星期
• gzYear: 干支年
• gzMonth: 干支月
• gzDay: 干支日
• IMonthCn: 农历月份中文
• IDayCn: 农历日期中文
• festival: 节日信息
• year: 公历年
• month: 公历月
• day: 公历日
• hour: 时
• minute: 分
• solarDate: 公历日期字符串
• lDay: 农历日
• lMonth: 农历月
• lYear: 农历年
• lunarDate: 农历日期字符串
• lunarDateNumber: 农历日期数字格式
• Term: 节气
• isTerm: 是否为节气
• isLeap: 是否为闰月
• isToday: 是否为今天

开发环境

• HBuilderX（官方推荐IDE）
• Node.js（用于依赖管理）
• dayjs 库（需手动安装：npm install dayjs）

运行项目

1. 使用 HBuilderX 打开项目
2. 右键项目根目录
3. 选择 "运行" -> "运行到浏览器" 或 "运行到 H5"
4. 或者点击顶部工具栏的绿色三角形运行按钮

技术约束

• 仅适用于 Vue2 版本的 UniApp 项目
• 不支持 Vue3（需适配）
• 农历计算依赖内置算法，未开放自定义

已知问题

• defaultValue 参数说明较复杂，需文档辅助理解

更新日志

v1.0.0

• 初始版本发布
• 支持公历/农历日期选择
• 支持日期时间选择
• 支持农历公历切换

特别鸣谢

本项目基于 https://ext.dcloud.net.cn/plugin?id=3806 优化，在此感谢！