uni-datetime-picker 使用start禁用今天之前的时间开始和结束时间相同

uni-datetime-picker 使用start禁用今天之前的时间开始和结束时间相同

开发环境 版本号 项目创建方式
Mac MACOS 14 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Mac

HBuilderX类型：Alpha

HBuilderX版本号：3.93

浏览器平台：Edge

浏览器版本：版本 117.0.2045.40 (正式版本) (arm64)

示例代码：

<template>  
    <view class="form-container">  
        <uni-forms  
            ref="form"  
            :rules="rules"  
            :model="form"  
            labelPosition="top"  
            :label-width="75"  
            errShowType="toast">  
            <uni-forms-item label="用车时间" name="useTime">  
                <uni-datetime-picker  
                    :border="false"  
                    v-model="form.useTime"  
                    type="datetimerange"  
                    rangeSeparator="至"  
                    hideSecond  
                    :start="new Date().getTime()" />
            </uni-forms-item>
            <view class="flex bg-white padding-left padding-right padding-bottom">
                <u-button class="cu-btn bg-blue flex-sub margin-right" @tap="submit(0)">保存</u-button>
                <u-button class="cu-btn bg-green flex-sub" @tap="submit(1)">提交</u-button>
            </view>
        </uni-forms>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                id: null,
                useTime: [],
            },
            rules: {
                useTime: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '用车时间不能为空'
                        }
                    ]
                },
            },
            dataOptions: []
        }
    },
    methods: {
        submit(status) {
            this.$refs.form
                .validate()
                .then((res) => {
                    this.$modal.loading()
                    const params = {
                        ...this.form,
                        status,
                        beginTime: this.form.useTime[0],
                        endTime: this.form.useTime[1],
                        presetProcessList
                    }
                    delete params.useTime
                })
                .catch((err) => {
                    console.log('err', err)
                })
        }
    }
}
</script>

<style>
</style>

操作步骤：

开始时间和结束时间都选择当天，在选择开始和结束的时分，点击确定；比如选择10月23号，开始时间选择10-23 14:00，结束时间选择10-23 17:00

预期结果：

展示选择的时间 比如：2023-10-23 14:00 2023-10-23 17:00

实际结果：

展示的是当前的时间，比如：2023-10-23 09:41 2023-10-23 09:41

bug描述：

uni-datetime-picker 使用start禁用今天之前的时间，如果开始和结束时间都选择的当天，无法更改当天的时间，都会展示当前的时间


2 回复

插件版本：2.2.24 根据 https://github.com/dcloudio/uni-ui/issues/788，修改过源码 // const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?[0-9]:[0-5]?[0-9])?$/ const dateTimeReg = /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])( [0-5]?[0-9]:[0-5]?0-9?)?$/


根据你的描述，这个问题是uni-datetime-picker组件在选择同一天时间范围时出现的bug。以下是解决方案：

  1. 问题原因：当开始和结束时间选择同一天时，组件会错误地重置为当前时间。

  2. 解决方法：可以改用disabledDate属性来禁用今天之前的日期，而不是使用start属性：

<uni-datetime-picker
    :border="false"
    v-model="form.useTime"
    type="datetimerange"
    rangeSeparator="至"
    hideSecond
    :disabledDate="disabledDate" />
  1. 在script部分添加disabledDate方法：
methods: {
    disabledDate(time) {
        return time < new Date().setHours(0, 0, 0, 0)
    },
    // 其他方法...
}
回到顶部