更新记录

1.0.0（2025-10-16） 下载此版本

1.0.0

• 首次发布
• 实现自定义日期时间范围选择器组件
• 支持日期和时间选择模式切换
• 优化UI布局和交互体验

平台兼容性

uni-app(3.7.10)

自定义日期时间范围选择器 (yxt-datepicker-range)

一个功能强大的自定义日期时间范围选择器组件，适用于uni-app项目，支持微信小程序等多端平台。

功能特点

• 📅 支持日期和时间选择模式切换
• 🎨 优化的UI布局，顶部日期和时间各占一半宽度
• 📱 分离标题与已选择时间显示，标题无背景，时间区域有背景
• 📊 解决弹窗高度跳动问题，提供稳定的用户体验
• 🔄 支持开始和结束时间的选择
• 🎯 适用于微信小程序等多端平台

安装方法

方法一：通过插件市场安装

1. 在HBuilderX中，点击顶部菜单的"工具" -> "插件市场"
2. 搜索"自定义日期时间范围选择器"或"yxt-datepicker-range"
3. 点击"导入插件" -> "导入到项目"

方法二：手动复制

1. 将uni_modules/yxt-datepicker-range目录复制到您的项目中
2. 确保目录结构完整

使用方法

1. 在页面中引入组件

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

    <!-- 已选择的时间范围显示 -->
    <view v-if="selectedStartTime && selectedEndTime" class="selected-time">
      <text>{{ selectedStartTime }} - {{ selectedEndTime }}</text>
    </view>

    <!-- 自定义日期时间选择器组件 -->
    <custom-date-time-picker
      v-if="showPicker"
      @confirm="handleDateTimeConfirm"
      @cancel="showPicker = false"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPicker: false,
      selectedStartTime: '',
      selectedEndTime: ''
    }
  },
  methods: {
    // 处理日期时间选择结果
    handleDateTimeConfirm(e) {
      this.selectedStartTime = e.startTime
      this.selectedEndTime = e.endTime
      this.showPicker = false
    }
  }
}
</script>

属性说明

事件说明

兼容性说明

• ✅ 微信小程序
• ✅ H5
• ✅ 支付宝小程序
• ✅ 抖音小程序
• ✅ 百度小程序
• ✅ App端

更新日志

1.0.0

• 首次发布
• 实现自定义日期时间范围选择器组件
• 支持日期和时间选择模式切换
• 优化UI布局和交互体验
• 解决弹窗高度跳动问题
• 实现顶部日期和时间各占一半的布局
• 分离标题与已选择时间显示，标题无背景，时间区域有背景

作者信息

• 组件名称：自定义日期时间范围选择器
• 插件ID：yxt-datepicker-range
• 版本：1.0.0