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

• 移动开发

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

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

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

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

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

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

代码如下



        



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

 

 

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/ffec403320.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐