更新记录

1.0.0（2026-02-28） 下载此版本

• 初始版本发布
• 支持日期、时间、日期时间三种模式
• 支持底部弹窗交互

平台兼容性

uni-app(3.7.0)

uni-app x(4.0)

底部弹窗日期时间选择器

基于 UniApp + Vue3 的底部弹窗式日期时间选择器，交互流畅，支持多种模式。

✨ 特性

• 🎯 底部弹窗设计，符合移动端交互习惯
• 📅 支持三种模式：日期、时间、日期时间
• 🎨 支持自定义格式和样式
• 🔒 支持时间范围限制
• ⏱️ 支持分钟步进设置
• 🕐 支持显示秒数
• 📱 纯原生实现，无第三方依赖
• ⚡ 支持 Vue3 <script setup> 语法

📦 安装

方式一：插件市场（推荐）

访问 DCloud 插件市场，搜索"底部弹窗日期时间选择器"，点击"使用 HBuilderX 导入插件"。

方式二：uni_modules

1. 下载插件压缩包
2. 解压到项目 uni_modules/ 目录
3. 重命名为 liuying-date-time-picker

🚀 使用

基础用法

<template>
  <date-time-picker v-model="time" />
</template>

<script setup>
import { ref } from 'vue'
const time = ref('')
</script>

### 选择日期
<date-time-picker 
  v-model="date" 
  mode="date"
  placeholder="请选择日期"
/>
### 选择时间（15分钟步进）
<date-time-picker 
  v-model="time" 
  mode="time"
  :minute-step="15"
/>

### 完整配置
<template>
  <date-time-picker 
    v-model="datetime"
    mode="datetime"
    title="选择预约时间"
    format="YYYY年MM月DD日 HH:mm"
    :show-seconds="false"
    :minute-step="5"
    min="2024-01-01 00:00"
    max="2024-12-31 23:59"
    @change="onChange"
    @confirm="onConfirm"
    @cancel="onCancel"
  />
</template>

<script setup>
const onChange = (value, date) => {
  console.log('变化：', value, date)
}

const onConfirm = (value, date) => {
  console.log('确定：', value, date)
}

const onCancel = () => {
  console.log('取消选择')
}
</script>

### 自定义触发样式
<date-time-picker v-model="time">
  <view class="custom-trigger">
    <text>📅 {{ time || '选择时间' }}</text>
  </view>
</date-time-picker>

// ----------------------------------------------------------
| 属性           | 类型      | 默认值        | 说明                          |
| ------------ | ------- | ---------- | --------------------------- |
| v-model      | String  | -          | 绑定值                         |
| mode         | String  | 'datetime' | 模式：`date`/`time`/`datetime` |
| placeholder  | String  | '请选择时间'    | 占位文本                        |
| title        | String  | -          | 弹窗标题                        |
| format       | String  | -          | 自定义格式                       |
| min          | String  | -          | 最小日期/时间                     |
| max          | String  | -          | 最大日期/时间                     |
| minuteStep   | Number  | 1          | 分钟步进                        |
| showSeconds  | Boolean | false      | 是否显示秒                       |
| showPreview  | Boolean | true       | 显示顶部预览                      |
| defaultValue | String  | -          | 默认值                         |
| zIndex       | Number  | 1000       | 弹窗层级                        |

| 事件名     | 参数            | 说明      |
| ------- | ------------- | ------- |
| change  | (value, Date) | 值变化时触发  |
| confirm | (value, Date) | 点击确定时触发 |
| cancel  | -             | 点击取消时触发 |
| open    | -             | 弹窗打开时触发 |
| close   | -             | 弹窗关闭时触发 |

| 占位符  | 说明   | 示例    |
| ---- | ---- | ----- |
| YYYY | 四位年份 | 2024  |
| MM   | 两位月份 | 01-12 |
| DD   | 两位日期 | 01-31 |
| HH   | 两位小时 | 00-23 |
| mm   | 两位分钟 | 00-59 |
| ss   | 两位秒  | 00-59 |

💻 平台支持
✅ App (iOS/Android)
✅ H5
✅ 微信小程序
✅ 支付宝小程序
✅ 百度小程序
✅ 字节跳动小程序
✅ QQ小程序
✅ 京东小程序
✅ 快手小程序
✅ 钉钉小程序
✅ 飞书小程序

📝 更新日志
v1.0.0 (2024-02-26)
✨ 初始版本发布
🎉 支持日期、时间、日期时间三种模式
🚀 支持底部弹窗交互