JavaScript写一个设置日期不可选功能

52 阅读2分钟

由于我公司是与酒店合作,用户在某个房源预订入住时间及入住日期,但是呢,这个房源可能会遇到“锁房”状态,也就是某个时间段不能选,然后根据后端返的数据跟日期关联哪些日期可选,哪些不可选,如下图

112.png

所以,例如某个用户想在这个房源入住30天,且在24号入住,根据后端返的日期24号是可选的,但由于客户入住30天,所以我就要根据用户入住时间及预订天数反推哪些可选哪些不可选,如果光看上图的话,就能知道12.24至1.10是不可选的,因为时间不足30,所以1.11之前所有的日期都需要为false,不让用户选。如果用户想入住15天,入住日期选择12.24,那到1.11是够15天的,但还得反推,为什么呢?因为12.28至1.10是不足15天的,所以用户想入住15天且在12.24入住的话,只能选择12.24至12.27

故而光后端返上图数据是不可行的,前端还得做判断,去除不在预订时间内的日期(下图是供用户选择的天数,自选是随便输入,大于0即可)

113.png

具体代码实现:

let markFalse = []//定义变量存储日期中mark为false下标
for (let i in data) {
    if (data[i].mark == false) {
        markFalse.push(i)
    }
}

let newMarkFalse = ['0', ...markFalse]//添加0在第一个是计算每个下标的差值
let day = 15//用户选择的入住天数
let dif = 0
for (let i = 0; i < newMarkFalse.length - 1; i++) {
    dif = newMarkFalse[i + 1] - newMarkFalse[i]
    if (dif < day) {
        for (let n = 0; n < newMarkFalse[i + 1]; n++) {
            data[n].mark = false
        }
    } else {
        for (let j = newMarkFalse[i + 1] - (day - 1); j < newMarkFalse[i + 1]; j++) {
            data[j].mark = false
        }
    }
}

结语:如有更好实现方法,请不吝赐教^_^