更新记录

1.0.2（2025-01-10） 下载此版本

修复日期区域显示超出真机宽度问题

1.0.1（2025-01-10） 下载此版本

兼容了多平台，优化了组件性能

1.0.0（2025-01-09） 下载此版本

初始版本上线

平台兼容性

uni-app

其他

日期时间范围选择器组件使用说明

组件介绍

一个用于选择日期时间范围的 Vue 组件，主要用于租车、酒店预订等场景。支持日期选择、时间选择、租期计算等功能。

安装使用

1. 在需要使用的页面中引入组件：

   
   import startEndDateTime from '@/uni_modules/start-end-date-time/components/start-end-date-time/start-end-date-time.vue';

export default { components: { startEndDateTime }, }

## 基础用法
```vue
<template>
    <view>
        <start-end-date-time @confirm="handleDateTimeConfirm" :defaultStartDate="defaultStartDate"
            :defaultStartTime="defaultStartTime" :defaultEndDate="defaultEndDate" :defaultEndTime="defaultEndTime" />
    </view>
</template>

属性说明

事件说明

功能特点

• 支持日期范围选择
• 支持时间选择（可设置时间间隔）
• 自动计算租期时长
• 最小租期限制（1小时）
• 最大租期限制（30天）
• 防止选择过期时间
• 支持同一天租期选择
• 适配不同屏幕尺寸

使用示例

<template>
    <view>
        <start-end-date-time @confirm="handleDateTimeConfirm" :defaultStartDate="defaultStartDate"
            :defaultStartTime="defaultStartTime" :defaultEndDate="defaultEndDate" :defaultEndTime="defaultEndTime" />
    </view>
</template>

<script>
    import startEndDateTime from '@/uni_modules/start-end-date-time/components/start-end-date-time/start-end-date-time.vue';
    export default {
        components: {
            startEndDateTime
        },
        data() {
            return {
                defaultStartDate: '',
                defaultStartTime: '',
                defaultEndDate: '',
                defaultEndTime: ''
            }
        },
        onLoad() {
            // 页面加载时获取存储的日期时间数据
            const dateTimeData = uni.getStorageSync('selectedDateTime')
            if (dateTimeData) {
                this.defaultStartDate = dateTimeData.start.date
                this.defaultStartTime = dateTimeData.start.time
                this.defaultEndDate = dateTimeData.end.date
                this.defaultEndTime = dateTimeData.end.time
            } else {
                // 如果没有存储数据，设置默认值为明天和后天
                const tomorrow = new Date()
                tomorrow.setDate(tomorrow.getDate() + 1)
                const dayAfterTomorrow = new Date()
                dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2)

                // 格式化日期为 YYYY-MM-DD
                const formatDate = (date) => {
                    const year = date.getFullYear()
                    const month = String(date.getMonth() + 1).padStart(2, '0')
                    const day = String(date.getDate()).padStart(2, '0')
                    return `${year}-${month}-${day}`
                }

                this.defaultStartDate = formatDate(tomorrow)
                this.defaultStartTime = '09:00'
                this.defaultEndDate = formatDate(dayAfterTomorrow)
                this.defaultEndTime = '09:00'
            }
        },
        methods: {
            handleDateTimeConfirm(result) {
                // 保存选择的日期时间到本地存储
                uni.setStorageSync('selectedDateTime', result)
                uni.navigateBack()
            }
        }
    }
</script>

注意事项

1. iOS 设备对日期格式有特殊要求，组件已做兼容处理
2. 时间选择支持最小间隔设置，默认30分钟
3. 选择同一天时，结束时间必须至少比开始时间晚1小时
4. 组件会自动处理日期时间的有效性验证