更新记录

2.2.0（2025-10-22） 下载此版本

v2.2.0 更新内容：

 ✨ 新功能
 - 组件自动记忆功能（LocalStorage）
 - 类型切换显示当前时间
 - 简化日志输出（中文）

2.1.0（2025-10-22） 下载此版本

yi-datetime-picker 更新日志

v2.1.0 (2025-10-22)

✨ 新功能

1. 实现 minDate/maxDate 日期范围限制

平台兼容性

uni-app(3.6.11)

yi-datetime-picker - 公历农历日期时间选择器

支持公历和农历的日期时间选择器组件，零依赖，轻量级，功能强大

🌟 核心特性

⭐ 零依赖

• 不依赖 tyme4ts 或其他第三方库
• 使用静态数据和纯 JavaScript 算法
• 文件体积小，性能优异

🌞🌙 双历法支持

• 公历选择：年/月/日/时/分/秒
• 农历选择：年/月/日/时辰（含闰月、干支年）
• 自由切换：一键切换公历/农历

🎨 UI精美

• 完全模仿 uView Next 风格
• 支持自定义主题色
• 流畅的滚动动画

🔧 功能强大

• ✅ 日期范围限制（minDate/maxDate）
• ✅ 多种选择模式（datetime/date/time/year-month）
• ✅ 自定义格式化（formatter）
• ✅ 步进控制（minuteStep/hourStep）
• ✅ 禁用/只读/加载状态
• ✅ 确认前验证钩子

📱 跨平台

• ✅ H5
• ✅ 微信小程序
• ✅ 支付宝小程序
• ✅ App

📸 效果展示

公历选择

农历选择

多种模式

📦 安装使用

方式一：下载组件

1. 从插件市场下载 yi-datetime-picker 组件
2. 复制到项目的 components 目录下

方式二：npm 安装（如果支持）

npm install yi-datetime-picker

🚀 快速开始

最简单的使用

<template>
  <view>
    <button @click="showPicker = true">选择日期时间</button>

    <yi-datetime-picker
      v-model="selectedTime"
      :show="showPicker"
      @confirm="handleConfirm"
      @cancel="showPicker = false"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const selectedTime = ref(Date.now())
const showPicker = ref(false)

const handleConfirm = (timestamp, formatted) => {
  console.log('时间戳:', timestamp)
  console.log('格式化:', formatted)
  showPicker.value = false
}
</script>

📖 详细文档

Props 属性

更多属性请查看完整文档 → README.md

💡 使用场景

场景1：生日选择器（限制日期范围）

<yi-datetime-picker
  v-model="birthday"
  :show="visible"
  :min-date="new Date(1900, 0, 1).getTime()"
  :max-date="Date.now()"
  mode="date"
  title="选择生日"
/>

场景2：只选时间（闹钟设置）

<yi-datetime-picker
  v-model="alarmTime"
  :show="visible"
  mode="time"
  title="设置闹钟"
/>

场景3：农历选择（六爻起卦）

<template>
  <yi-datetime-picker
    ref="pickerRef"
    v-model="divineTime"
    :show="visible"
    default-type="lunar"
    enable-lunar
    @confirm="handleConfirm"
  />
</template>

<script setup>
const pickerRef = ref()

const handleConfirm = (timestamp, formatted) => {
  // 获取农历数据
  const lunarData = pickerRef.value.getLunarData()
  console.log('农历:', lunarData)
  // { type: 'lunar', year: 2024, month: 12, day: 20, hour: 0 }
}
</script>

场景4：自定义显示格式

<yi-datetime-picker
  :formatter="(type, value) => {
    if (type === 'year') {
      if (value === new Date().getFullYear()) return '今年'
      return `${value}年`
    }
    return value
  }"
/>

更多示例请查看 → 使用示例.md

🌙 农历功能说明

闰月支持

• 自动识别闰月年份
• 闰月显示为"闰X月"
• 基于国家标准（GB/T 33661-2017）

干支年

• 使用60甲子循环算法
• 显示格式：2024(甲辰)

时辰对照

数据准确性

• ✅ 1900-2100年闰月数据100%准确
• ✅ 基于 tyme4ts 官方数据生成
• ✅ 符合国家标准

⚠️ 注意事项

农历转换

重要： 本组件不负责农历转公历的转换！

选择器只负责UI选择和数据返回，农历到公历的转换需要调用方处理。

推荐方案：

1. 使用 tyme4ts 库（精确转换）
2. 使用后端API（服务器端转换）
3. 通过 ref.getLunarData() 获取农历数据

🔧 暴露方法（通过 ref 调用）

📊 性能优势

🎯 适用项目

• ✅ 六爻、八字等命理应用
• ✅ 日历应用
• ✅ 预约系统
• ✅ 闹钟、提醒应用
• ✅ 任何需要公历/农历选择的场景

📝 更新日志

v2.1.0 (2025-10-22)

• ✅ 实现 minDate/maxDate 日期范围限制
• ✅ 实现 formatter 自定义格式化
• ✅ 实现 mode 多样化（date/time/year-month）
• ✅ 修复 readonly 只读状态
• ✅ 完善 showSeconds 秒列显示

v2.0.0 (2025-01-22)

• ✅ 零依赖重构
• ✅ 完整农历支持
• ✅ 暴露方法

完整更新日志 → CHANGELOG.md

💬 问题反馈

如有问题或建议，欢迎提交 Issue 或联系作者。

📄 开源协议

MIT License

⭐ 如果觉得有用，请给个星标！

让更多开发者受益！ 🙏