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

这篇具有很好参考价值的文章主要介绍了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属性，实现时间选择限制

代码如下


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

文章来源地址https://www.toymoban.com/news/detail-504494.html

到了这里，关于uni-app uni-ui 微信小程序 uni-datetime-picker 时间选择组件设置start和end属性，实现时间选择限制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！