?效果如圖，先選擇開始日期，完成日期需要在開始日期之后，先選擇完成日期，開始日期需要在完成日期之前
需要用到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")
//設置初始數(shù)據(jù)
const formData = ref<any>({
endTime: "",// 施工結束時間 yyyy-MM-dd
startTime: "", // 施工開始時間 yyyy-MM-dd
})
const changeStartTime = (e: any) => {
console.log(e, "e")
//若點擊開始日期，結束日期沒有數(shù)據(jù)則數(shù)據(jù)還原
if (!formData.value.endTime) {
beginEndTime.value = "2029-05-01"
}
finishStartTime.value = e
}
const changeEndTime = (e: any) => {
console.log(e, "e")
//若點擊結束日期，開始日期沒有數(shù)據(jù)則數(shù)據(jù)還原
if (!formData.value.startTime) {
finishStartTime.value = "1999-05-01"
}
beginEndTime.value = e
}
這樣一個能夠限制選定范圍的組件就ok了！
?文章來源地址http://www.zghlxwxcb.cn/news/detail-504494.html文章來源：http://www.zghlxwxcb.cn/news/detail-504494.html
?
到了這里，關于uni-app uni-ui 微信小程序 uni-datetime-picker 時間選擇組件設置start和end屬性，實現(xiàn)時間選擇限制的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
