美文网首页
饿了么时间组件2个框。让第二个无法选择第一个之前的时间,让第一个

饿了么时间组件2个框。让第二个无法选择第一个之前的时间,让第一个

作者: 邪七 | 来源:发表于2022-07-20 16:58 被阅读0次

比如第一个值选择了:2020-11-06
我希望第2个值不能选 2020-11-06之前的。
同样第二值选择了:2020-11-06
我希望第一个值不能选择:2020-11-06之后的(因为第2个已经选了)

代码:

// HTML
<el-date-picker
    v-model="actionCouponParam.effectiveBeginTime"
    type="date"
    placeholder="请选择有效期开始时间"
    :picker-options="floatTime1(actionCouponParam.effectiveEndTime)"
    :disabled="actionCouponParam.effectiveTimeType != 0">
</el-date-picker>
<el-date-picker
    style="margin-left:15px"
    v-model="actionCouponParam.effectiveEndTime"
    type="date"
    placeholder="请有效期结束时间"
    :picker-options="floatTime(actionCouponParam.effectiveBeginTime)"
    :disabled="actionCouponParam.effectiveTimeType != 0">
</el-date-picker>

// JS
floatTime(times){
    let newDate = new Date(times);
    return {
        disabledDate: (time) => {
            return time.getTime() < newDate.getTime()
        }
    }
},
floatTime1(times){
    let newDate = new Date(times);
    return {
        disabledDate: (time) => {
            return time.getTime() > newDate.getTime()
        }
    }
},

以上代码会遇到一个BUG,就是选完开始/结束时间后,另一个结束/开始时间是全禁用了,因为此时传进去的times是null 怎么解决呢?直接代码!
代码其实是可以优化的,只不过作为演示,直观一点!

// 结束时间转时间戳
floatTime(times) {
    if(times){
        let newDate = new Date(times);
        return {
            disabledDate: (time) => {
                return time.getTime() < newDate.getTime()
            }
        }
    }else{
        return {
            disabledDate: (time) => {
                return false
            }
        }
    }
},
// 开始时间转时间戳
floatTime1(times) {
    if(times){
        let newDate = new Date(times);
        return {
            disabledDate: (time) => {
                return time.getTime() > newDate.getTime()
            }
        }
    }else{
        return {
            disabledDate: (time) => {
                return false
            }
        }
    }

},

相关文章

网友评论

      本文标题:饿了么时间组件2个框。让第二个无法选择第一个之前的时间,让第一个

      本文链接:https://www.haomeiwen.com/subject/lbauirtx.html