uni-app uni-ui 微信小程序 uni-datetime-picker 时间选择组件设置start和end属性，实现时间选择限制

最新推荐文章于 2025-03-08 11:30:31 发布

niconicon____

最新推荐文章于 2025-03-08 11:30:31 发布

阅读量1.1w

点赞数 4

文章标签：微信小程序 uni-app 小程序

本文链接：https://blog.csdn.net/niconicon____/article/details/129210760

版权

文章展示了如何在Vue.js应用中利用uni-datetime-picker组件，通过设置开始日期和结束日期的属性来确保完成日期在开始日期之后，反之亦然。当用户在无开始日期时选择结束日期，会将结束日期重置；同样，无结束日期选择开始日期时，开始日期也会重置。这确保了日期选择的逻辑正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图，先选择开始日期，完成日期需要在开始日期之后，先选择完成日期，开始日期需要在完成日期之前

需要用到uni-datetime-picker官方的三个属性

代码如下


<uni-datetime-picker :border="true" v-model="formData.startTime" type="date"
 @change="changeStartTime" :start="beginStartTime" :end="beginEndTime">

</uni-datetime-picker>        
<uni-datetime-picker v-model="formData.endTime" :border="true" type="date" @change="changeEndTime"
:start="finishStartTime" :end="finishEndTime">

</uni-datetime-picker>
              
const beginStartTime = ref("1999-05-01")
const beginEndTime = ref("2029-05-01")
const finishStartTime = ref("1999-05-01")
const finishEndTime = ref("2029-05-01")
//设置初始数据
const formData = ref<any>({
    endTime: "",// 施工结束时间 yyyy-MM-dd
    startTime: "", // 施工开始时间 yyyy-MM-dd
})
const changeStartTime = (e: any) => {
    console.log(e, "e")
    //若点击开始日期，结束日期没有数据则数据还原
    if (!formData.value.endTime) {
        beginEndTime.value = "2029-05-01"
    }
    finishStartTime.value = e
}

const changeEndTime = (e: any) => {
    console.log(e, "e")
    //若点击结束日期，开始日期没有数据则数据还原
    if (!formData.value.startTime) {
        finishStartTime.value = "1999-05-01"
    }
    beginEndTime.value = e
}

这样一个能够限制选定范围的组件就ok了！