datepicker dateranges 覆盖布局

Question

我试图在 jquery 日期选择器中突出显示多个日期范围。到目前为止，它只适用于一个范围。但是当我尝试显示多个日期范围时，for 循环会覆盖之前的布局。

使用以下代码：

$("#datepicker").datepicker({

    firstDay: 1,
    beforeShowDay: function(date) {

        for(var i = 0; i < testJson.length; i++) {
            startDate = new Date(testJson[i].startDate);
            endDate = new Date(testJson[i].endDate);

            if(date.getTime() === endDate.getTime()) {
                return [true, 'start-of-day', 'Begin van dag gereserveerd!'];
            }

            if(date.getTime() === startDate.getTime()) {
                return [true, 'end-of-day', 'Einde van dag gereserveerd!'];
            }

            if(date >= startDate && date <= endDate) {
                return [true, 'full-day', 'Gereserveerd!'];
            }

        }
        return [true, '', ''];
    }
});

我了解当前情况：

期望的情况：

目前2个区间相互跟随只显示半天。我想要的是当开始日期和结束日期在同一天时，它显示一整天。

如果需要任何其他信息，请询问。对此很陌生。提前致谢！

编辑：

这是我得到的 json 的示例

var testJson = [{
    "startDate": "2015, 5, 1",
        "endDate": "2015, 5, 4"
}, {
    "startDate": "2015, 5, 4",
        "endDate": "2015, 5, 11"
}];

编辑：

感谢接受的答案，它完美地工作，如下所示（并在接受的答案的 fiddle 中展示：

var testJson = [
    {
        "startDate": "2015, 6, 8",
        "endDate": "2015, 6, 15"
    },
    {
        "startDate": "2015, 6, 15",
        "endDate": "2015, 6, 22"
    },
    {
        "startDate": "2015, 6, 22",
        "endDate": "2015, 6, 29"
    }
];

唯一要记住的是根据开始日期按升序顺序保存记录。其余部分完美无缺，因为提供的记录没有重叠。

Answer 1

让我们试一试：

if(testJson[i+1]){
     nextStartDate = new Date(testJson[i+1].startDate);
}
if (date.getTime() === endDate.getTime() && date.getTime() === nextStartDate.getTime()) {
     return [true, 'full-day', 'Gereserveerd!'];
}

保存下一个开始日期
检查当前日期是否与当前结束日期和下一个开始日期相同，如果是，则return它是一整天

Demo

datepicker dateranges 覆盖布局

datepicker dateranges overrides layout

jquery

jquery-ui

jquery-ui-datepicker