更新记录

1.0.5（2026-01-23） 下载此版本

说明：2026-01-23 前发布的版本已废弃。

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

1.0.4（2026-01-20） 下载此版本

平台兼容性

uni-app(3.6.15)

dy-date-time-picker 日期时间选择器

用于 uni-app 的日期 + 时间筛选组件，支持日期/月份/年份单选与范围选择，并提供独立时间段选择。

🎯 适用场景

• 列表筛选（订单、报表、日志等）
• 统计时间区间选择
• 需要日期/月份/年份一体化筛选的业务

✨ 特性

• 双触发器（日期 / 时间）
• 日期/月份/年份：单选与范围合一
• 时间段：全天/上午/下午快捷选择 + 自定义范围（00:00-23:59，半小时刻度）
• 统一返回数据结构，便于接口对接
• Vue2/Vue3 兼容（已适配 v-model 与 update:modelValue）

✅ 已测试平台

• 微信小程序

⚠️ 其他平台

以下平台尚未验证，理论上兼容，请自行测试：

• App (app-vue、app-nvue)
• H5 (移动端/PC端)
• 支付宝/百度/抖音/QQ/钉钉/快手/飞书/京东 小程序
• 华为快应用、联盟快应用
• 云端：腾讯云 tcb、阿里云 aliyun、支付宝小程序云

📦 安装

在 DCloud 插件市场导入本插件（uni_modules 规范）。

🧩 快速上手

<template>
  <view>
    <dy-date-time-picker
      v-model="dateFilterValue"
      placeholder="选择日期/月份/年份"
      @change="handleChange"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      dateFilterValue: null
    }
  },
  methods: {
    handleChange(val) {
      console.log('选择结果:', val)
    }
  }
}
</script>

🧩 完整用法

<template>
  <view>
    <dy-date-time-picker
      v-model="dateFilterValue"
      :minYear="2020"
      :maxYear="2028"
      placeholder="选择日期/月份/年份"
      @change="handleChange"
      @input="handleInput"
      @update:modelValue="handleModelUpdate"
    />
    <view style="margin-top: 16rpx;">当前值：{{ dateFilterValue }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dateFilterValue: {
        startDate: '2026-01-01',
        endDate: '2026-01-07',
        time: { startTime: '09:00', endTime: '18:00' }
      }
    }
  },
  methods: {
    handleChange(val) {
      // 业务处理入口：用户点击“确定”后触发
      console.log('change(确认):', val)
    },
    handleInput(val) {
      // Vue2 v-model 同步事件
      console.log('input(Vue2同步):', val)
    },
    handleModelUpdate(val) {
      // Vue3 v-model 同步事件
      console.log('update:modelValue(Vue3同步):', val)
    }
  }
}
</script>

⚙️ Props

📣 Events

事件在组件中的作用

• change：确认选择后触发，用于业务逻辑。
• input：Vue2 依赖该事件更新 v-model。
• update:modelValue：Vue3 依赖该事件更新 v-model。

📄 Value 数据结构

日期选择（单选/范围）

{
  date: '2023-10-01',
  time: { startTime: '09:00', endTime: '12:00' }
}

{
  startDate: '2023-10-01',
  endDate: '2023-10-07',
  time: { startTime: '00:00', endTime: '23:59' }
}

月份选择（单选/范围）

{ month: '2023-10', time: { ... } }
{ startMonth: '2023-09', endMonth: '2023-12', time: { ... } }

年份选择（单选/范围）

{ year: '2023', time: { ... } }
{ startYear: '2025', endYear: '2026', time: { ... } }

📝 注意事项

• 组件依赖 uni-app 环境。
• 需要项目启用 scss/sass 支持。
• 时间“全天”回显为 00:00-23:59。

📄 License

MIT