Javascript 自定义日历，单击“标记日期范围”

我用php编程了一个自定义日历，一切都很有魅力。但是现在我遇到了jquery功能的问题。当用户单击特定日期时，应选择日期范围（数据属性）内的所有日期

这应该是这样的：

（选择第16天到第22天。）

到目前为止，我的代码是：

$（文档）.ready（函数（）{
var范围=7；/$（“.价目表日历”）。数据（“套餐范围”）；
变量范围_数组=[]；
对于（变量i=1；i-1
}).addClass（“选定”）；
}否则{
$（this.removeClass（“firstClick”）；
$（'td.green'）.removeClass（“选定”）；
}
});
});
.green{
背景：#cfe09b；
}
黄先生{
背景#fff59b；
}
瑞德先生{
背景：#f3997b；
}
氢{
字号：1.625rem；
文本转换：大写；
字体系列：“Droid衬线”，佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
边缘底部：10px；
}
表1.2-4日历日期，
table.page-calendar thead tr{
边界：0；
背景：无；
字体系列：“Droid衬线”，佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
}
表.page-日历日期跨度月，
表.page-日历日期tr跨度月{
字号：1.625rem；
文本转换：upprecase；
}
表2.page-日历日期跨度年，
表.page-日历日期tr跨度年{
字体大小：0.875rem；
}
表1.2-1日历日期，
表1.2-1日历日期tr td{
填充：0；
文本对齐：居中；
边框：1px实心#e6；
颜色：#dcaa2c；
文本转换：大写；
}
table.page-calendar thead td.empty，
table.page-calendar thead tr td.empty{
背景：#e6；
}
table.page-calendar thead td.empty span，
表1.2-1日历日期和时间a，
表.page-calendar thead tr td.empty span，
表1.2-1日历日期tr td a{
显示：块；
宽度：100%；
身高：100%；
填充：20px0；
字体大小：2.875rem；
最小高度：88px；
}
表1.2-1日历日期和时间a，
表1.2-1日历日期tr td a{
背景：#dcaa2c；
边框：1px实心#dcaa2c；
-webkit过渡：0.5s易用性；
-moz转换：0.5s易用性；
-ms转换：0.5s轻松度；
-o-过渡：0.5s的缓和度；
}
table.page-calendar thead td a：悬停，
table.page-calendar thead tr td a：悬停{
背景：rgba（220,170,44,0.7）；
}
表1.2-1日历日期和时间，
表1.2-1日历THAD tr td i{
颜色：#ffffff；
}
t车身{
背景：rgba（230,230,230,0.5）；
}
.日历行td{
边框：1px实心#ffffff；
背景：无；
文本对齐：居中；
}
.日历行td.日历日{
背景：rgba（204204204,0.5）；
}
.日历行td.calendar-day.green{
背景：#cfe09b；
光标：指针；
}
.日历行td.calendar-day.yellow{
背景#fff59b；
}
.日历行td.calendar-day.red{
背景：#f3997b；
}
.日历行td.calendar-day.firstClick{
背景：#dcaa2c；
颜色：#ffffff；
}
.日历行td.calendar-day.selected{
背景：rgba（220,170,44,0.5）；
颜色：#ffffff；
}
.日历行td.calendar-day.reserved{
背景：#dcaa2c；
颜色：#ffffff！重要；
}
.日历行td.calendar-day.second单击{
背景：#dcaa2c；
颜色：#ffffff；
}
.日历行td.calendar-day-np{
背景：rgba（230,230,230,0.1）；
}
.日历行td.today{
-webkit盒阴影：rgba（0,0,0,0.5）0 10px；
-moz盒阴影：rgba（0,0,0,0.5）010px；
盒影：rgba（0,0,0,0.5）0,10像素；
位置：相对位置；
z指数：12；
}
.日历行.标题td{
边界：0；
填充：0；
文本对齐：居中；
文本转换：大写；
字体系列：“Droid衬线”，佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字号：1rem；
填充：15px0；
}

2017年2月
所以
钼
Di
惯性矩
做
Fr
Sa
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
我自己找到了解决方案，现在我使用的是日期，而不是单元格索引

var range = calendar_wrapper.data("package-range") - 1;

    //Add Days
    function addDays(date, days) {
        var result = new Date(date);
        result.setDate(result.getDate() + days);
        return result;
    }

    //Dates between
    function getDates(startDate, stopDate) {
        var dateArray = new Array();
        var currentDate = startDate;
        while (currentDate <= stopDate) {
            dateArray.push(currentDate)
            currentDate = addDays(currentDate,1);
        }
        return dateArray;
    }

    $(document).on('click', calendar_wrapper_class + ' td.green', function(e) {
        e.preventDefault();
        if($("td.firstClick").length == 0) {
            $(this).addClass("firstClick");

            var date_var = $(this).data("date-js");
            var start_date = new Date(date_var);
            var end_date = addDays(start_date, range);
            var date_array = getDates(start_date, end_date);

            $.each(date_array,function(k,v) {
                var datestring = ("0" + v.getDate()).slice(-2) + "." + ("0"+(v.getMonth()+1)).slice(-2) + "." + v.getFullYear();
                $('td.green[data-date="' + datestring + '"]').addClass("selected");
            });

        } else {
            $(this).removeClass("firstClick");
            $('td.green').removeClass("selected");
        }
    });

var range=calendar\u wrapper.data（“包范围”）-1；
//增加天数
函数addDays（日期，天）{
var结果=新日期（日期）；
result.setDate（result.getDate（）+天）；
返回结果；
}
//日期介于
函数getDates（startDate、stopDate）{
var dateArray=新数组（）；
var currentDate=起始日期；
while（currentDate）您能否添加您的解决方案作为您自己问题的答案？