更新记录

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

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

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

平台兼容性

uni-app(3.6.15)

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

一个功能强大、美观实用的 uni-app 日期和时间选择器组件。

🌟 特性

• 双触发器设计：采用上下布局的双触发器，分别控制日期选择和时间选择，逻辑清晰，互不干扰。
• 多种日期模式：支持 日期范围、单日、月份、年份 四种选择模式。
• 独立时间筛选：支持独立的时间段筛选，包含 "全天"、"上午"、"下午" 快捷选项及自定义时间范围（精确到小时和半小时）。
• 统一数据结构：组件始终返回统一的数据对象结构 { ...dateInfo, time: { ... } }，方便后端接口对接。
• 美观 UI：精心设计的弹窗样式，支持固定表头、圆角边框、清晰的选中状态，提供优秀的交互体验。
• 高度可定制：支持自定义占位符、默认值等。

🌐 平台兼容性

Vue 框架支持

✅ Vue 2 | ✅ Vue 3

已测试支持

✅ 确认可用

• App (app-vue、app-nvue)
• H5 (移动端/PC端)
• 微信小程序

理论支持（未测试）

⚠️ 理论兼容，建议测试后使用

• 支付宝小程序
• 百度小程序
• 抖音小程序
• QQ小程序
• 钉钉小程序
• 快手小程序
• 飞书小程序
• 京东小程序
• 华为快应用
• 联盟快应用

云端平台

❓ 未测试

• 腾讯云 (tcb)
• 阿里云 (aliyun)
• 支付宝小程序云 (alipay)

不支持

❌ 明确不支持

• uniapp-x (app-uvue)

说明：本组件基于标准的 Vue 语法和 uni-app API 开发，理论上兼容大部分平台。但由于各平台可能存在细微差异，建议在目标平台充分测试后再正式使用。云端平台的兼容性取决于具体的渲染环境。

📸 预览

(此处可添加组件截图)

📋 版本要求

• HBuilderX: 3.2.0+
• uni-app: 3.0.0+
• Vue: 支持 Vue 2 和 Vue 3

🚀 安装

本组件符合 uni_modules 规范，推荐使用 HBuilderX 导入插件。

🛠️ 使用方法

基础用法

<template>
  <view>
    <dy-date-time-picker
      :value="dateFilterValue"
      @input="onDateFilterInput"
      @change="onDateFilterChange"
      placeholder="选择日期"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 绑定值 - 可以是字符串或对象
      dateFilterValue: ''
    }
  },
  methods: {
    // 处理 input 事件（用于 v-model 双向绑定）
    onDateFilterInput(val) {
      this.dateFilterValue = val
    },

    // 处理 change 事件（确认选择时触发）
    onDateFilterChange(val) {
      console.log('筛选结果:', val)
      // val 结构示例:
      // {
      //   date: '2023-10-01',
      //   time: { type: 'range', startTime: '09:00', endTime: '12:00' }
      // }

      // 在这里处理数据变化，比如重新加载数据
      this.loadData()
    },

    loadData() {
      // 你的数据加载逻辑
    }
  }
}
</script>

使用 v-model 的简化写法

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

<script>
export default {
  data() {
    return {
      dateFilterValue: ''
    }
  },
  methods: {
    onDateFilterChange(val) {
      console.log('选择结果:', val)
      // 处理数据变化
    }
  }
}
</script>

设置默认值

<template>
  <view>
    <dy-date-time-picker
      :value="dateFilterValue"
      @input="onDateFilterInput"
      @change="onDateFilterChange"
      placeholder="选择日期"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      dateFilterValue: {
        startDate: '2023-10-01',
        endDate: '2023-10-07'
      }
    }
  },

  mounted() {
    // 设置默认本周范围
    this.setDefaultWeekRange()
  },

  methods: {
    setDefaultWeekRange() {
      const now = new Date()
      const dayOfWeek = now.getDay()
      const diffToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1

      const monday = new Date(now)
      monday.setDate(now.getDate() - diffToMonday)

      const sunday = new Date(monday)
      sunday.setDate(monday.getDate() + 6)

      const formatDate = (date) => {
        const y = date.getFullYear()
        const m = String(date.getMonth() + 1).padStart(2, '0')
        const d = String(date.getDate()).padStart(2, '0')
        return `${y}-${m}-${d}`
      }

      this.dateFilterValue = {
        startDate: formatDate(monday),
        endDate: formatDate(sunday)
      }
    },

    onDateFilterInput(val) {
      this.dateFilterValue = val
    },

    onDateFilterChange(val) {
      console.log('日期变化:', val)
      // 重新加载数据
      this.loadData()
    }
  }
}
</script>

⚙️ API

Props

Events

Value 数据结构

组件返回的 value 对象结构如下：

1. 单日模式 (默认)

{
  date: '2023-10-01',
  time: {
    type: 'range', // 或 'all'
    startTime: '09:00',
    endTime: '12:00'
  }
}

2. 日期范围模式

{
  startDate: '2023-10-01',
  endDate: '2023-10-07',
  time: { ... }
}

3. 月份模式

{
  month: '2023-10',
  time: { ... }
}

4. 年份模式

{
  year: '2023',
  time: { ... }
}

⚠️ 注意事项

• 组件依赖 uni-app 环境，请确保在 uni-app 项目中使用。
• 组件使用了 scss 预处理样式，请确保项目已安装 scss/sass 插件。

🤝 贡献

欢迎提交 Issue 和 Pull Request 来完善这个组件。

📄 许可

MIT