datepicker dateranges 覆盖布局答案

【问题标题】：datepicker dateranges overrides layoutdatepicker dateranges 覆盖布局
【发布时间】：2015-05-26 09:32:01
【问题描述】：

我正在尝试在 jquery datepicker 中突出显示多个日期范围。到目前为止，它使用的是单个范围。但是当我尝试显示多个日期范围时，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"
}];

编辑：

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

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"
    }
];

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

【问题讨论】：

你能建立一个有效的例子吗？（包括css和json）
@empiric 刚刚发布了一个 json 示例。还不能让小提琴工作。
你也可以添加你的css吗？ here 是一个工作小提琴
我注意到一件事：您在满足endDate.getTime() 的条件中添加了start-of-day 类。这行不应该是end-of-day吗？ demo
@empiric 范围在早上结束。所以 endDate 占据了一天的开始。

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案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!'];
}

保存有一个的下一个开始日期
检查当前日期是否与当前 endDate 和下一个 startDate 相同，如果相同则返回一整天

Demo

【讨论】：