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

2023-09-02 05:53

短信预约 -IT技能 免费直播动态提醒

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

需要用到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({    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://blog.csdn.net/niconicon____/article/details/129210760

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序 uni-app 小程序

阅读原文内容投诉