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

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

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

代码如下

@change="changeStartTime" :start="beginStartTime" :end="beginEndTime">

:start="finishStartTime" :end="finishEndTime">

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({

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了！

好文推荐

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

金钥匙