更新记录

1.0.6（2026-03-20） 下载此版本

✨ 功能新增

• 新增周选择能力，支持按年选择单周或周范围
• 周选择返回结构新增 weekStartDate、weekEndDate，便于后端直接使用起止日期
• 新增 typeEnabled 配置项，可按需启用或禁用年份、月份、日期、周四种类型

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

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

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

平台兼容性

uni-app(3.7.1)

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="2030"
      :typeEnabled="{ date: true, month: true, year: true, week: true }"
      placeholder="选择年份/月份/日期/周"
      @change="handleChange"
      @input="handleInput"
      @update:modelValue="handleModelUpdate"
    />
  </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) {
      console.log('input(Vue2同步):', val)
    },
    handleModelUpdate(val) {
      console.log('update:modelValue(Vue3同步):', val)
    }
  }
}
</script>

⚙️ Props

📣 Events

📄 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: { ... } }

周选择（单选/范围）

{
  week: '2026-W03',
  weekStartDate: '2026-01-12',
  weekEndDate: '2026-01-18',
  time: { ... }
}
{
  startWeek: '2026-W03',
  endWeek: '2026-W12',
  weekStartDate: '2026-01-12',
  weekEndDate: '2026-03-22',
  time: { ... }
}

📝 注意事项

• 组件依赖 uni-app 环境。
• 需要项目启用 scss/sass 支持。
• 时间“全天”回显为 00:00-23:59。
• 关闭某个 type 后，该类型 Tab 不显示，但原有值结构仍兼容回显。

📄 License

MIT