自定义日历，点击标记日期范围

Question

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

这应该是这样的：

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

到目前为止我的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  var range = 7; //$('.price-list-calendar').data("package-range");
  var range_array = [];
  for (var i = 1; i < range; i++) {
    range_array.push(i);
  }

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

      $('td.green').filter(function(i) {
        return range_array.indexOf(i) > -1
      }).addClass("selected");

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

});

＆＃13;

.green {
  background: #cfe09b;
}

.yellow {
  background: #fff59b;
}

.red {
  background: #f3997b;
}

h2 {
  font-size: 1.625rem;
  text-transform: uppercase;
  font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
  margin-bottom: 10px;
}

table.page-calendar thead,
table.page-calendar thead tr {
  border: 0;
  background: none;
  font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
}

table.page-calendar thead span.month,
table.page-calendar thead tr span.month {
  font-size: 1.625rem;
  text-transform: upprecase;
}

table.page-calendar thead span.year,
table.page-calendar thead tr span.year {
  font-size: 0.875rem;
}

table.page-calendar thead td,
table.page-calendar thead tr td {
  padding: 0;
  text-align: center;
  border: 1px solid #e6e6e6;
  color: #dcaa2c;
  text-transform: uppercase;
}

table.page-calendar thead td.empty,
table.page-calendar thead tr td.empty {
  background: #e6e6e6;
}

table.page-calendar thead td.empty span,
table.page-calendar thead td a,
table.page-calendar thead tr td.empty span,
table.page-calendar thead tr td a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px 0;
  font-size: 2.875rem;
  min-height: 88px;
}

table.page-calendar thead td a,
table.page-calendar thead tr td a {
  background: #dcaa2c;
  border: 1px solid #dcaa2c;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
  -o-transition: 0.5s ease;
}

table.page-calendar thead td a:hover,
table.page-calendar thead tr td a:hover {
  background: rgba(220, 170, 44, 0.7);
}

table.page-calendar thead td i,
table.page-calendar thead tr td i {
  color: #ffffff;
}

tbody {
  background: rgba(230, 230, 230, 0.5);
}

.calendar-row td {
  border: 1px solid #ffffff;
  background: none;
  text-align: center;
}

.calendar-row td.calendar-day {
  background: rgba(204, 204, 204, 0.5);
}

.calendar-row td.calendar-day.green {
  background: #cfe09b;
  cursor: pointer;
}

.calendar-row td.calendar-day.yellow {
  background: #fff59b;
}

.calendar-row td.calendar-day.red {
  background: #f3997b;
}

.calendar-row td.calendar-day.firstClick {
  background: #dcaa2c;
  color: #ffffff;
}

.calendar-row td.calendar-day.selected {
  background: rgba(220, 170, 44, 0.5);
  color: #ffffff;
}

.calendar-row td.calendar-day.reserved {
  background: #dcaa2c;
  color: #ffffff !important;
}

.calendar-row td.calendar-day.secondClick {
  background: #dcaa2c;
  color: #ffffff;
}

.calendar-row td.calendar-day-np {
  background: rgba(230, 230, 230, 0.1);
}

.calendar-row td.today {
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  position: relative;
  z-index: 12;
}

.calendar-row.heading td {
  border: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
  font-size: 1rem;
  padding: 15px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="page-calendar" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <td colspan="1" class="empty" valign="middle"><span>&nbsp;</span></td>
      <td colspan="6" valign="middle"><span class="month">Februar</span> <span class="year">2017</span></td>
    </tr>
    <tr>
      <td class="calendar-day-head"> So</td>
      <td class="calendar-day-head">Mo</td>
      <td class="calendar-day-head">Di</td>
      <td class="calendar-day-head">Mi</td>
      <td class="calendar-day-head">Do</td>
      <td class="calendar-day-head">Fr</td>
      <td class="calendar-day-head">Sa</td>
    </tr>
  </thead>
  <tbody>
    <tr class="calendar-row">
      <td class="calendar-day-np"></td>
      <td class="calendar-day-np"></td>
      <td class="calendar-day-np"></td>
      <td class="calendar-day  " data-date="01.02.2017" data-amount="">
        <div class="day-number">1</div>
      </td>
      <td class="calendar-day  " data-date="02.02.2017" data-amount="">
        <div class="day-number">2</div>
      </td>
      <td class="calendar-day  " data-date="03.02.2017" data-amount="">
        <div class="day-number">3</div>
      </td>
      <td class="calendar-day  " data-date="04.02.2017" data-amount="">
        <div class="day-number">4</div>
      </td>
    </tr>
    <tr class="calendar-row">
      <td class="calendar-day  " data-date="05.02.2017" data-amount="">
        <div class="day-number">5</div>
      </td>
      <td class="calendar-day  " data-date="06.02.2017" data-amount="">
        <div class="day-number">6</div>
      </td>
      <td class="calendar-day  " data-date="07.02.2017" data-amount="">
        <div class="day-number">7</div>
      </td>
      <td class="calendar-day  " data-date="08.02.2017" data-amount="">
        <div class="day-number">8</div>
      </td>
      <td class="calendar-day  " data-date="09.02.2017" data-amount="">
        <div class="day-number">9</div>
      </td>
      <td class="calendar-day  " data-date="10.02.2017" data-amount="">
        <div class="day-number">10</div>
      </td>
      <td class="calendar-day  " data-date="11.02.2017" data-amount="">
        <div class="day-number">11</div>
      </td>
    </tr>
    <tr class="calendar-row">
      <td class="calendar-day  " data-date="12.02.2017" data-amount="">
        <div class="day-number">12</div>
      </td>
      <td class="calendar-day  " data-date="13.02.2017" data-amount="">
        <div class="day-number">13</div>
      </td>
      <td class="calendar-day  " data-date="14.02.2017" data-amount="">
        <div class="day-number">14</div>
      </td>
      <td class="calendar-day  " data-date="15.02.2017" data-amount="">
        <div class="day-number">15</div>
      </td>
      <td class="calendar-day today green firstClick" data-date="16.02.2017" data-amount="1044.000">
        <div class="day-number">16</div>
      </td>
      <td class="calendar-day  green selected" data-date="17.02.2017" data-amount="1044.000">
        <div class="day-number">17</div>
      </td>
      <td class="calendar-day  green selected" data-date="18.02.2017" data-amount="1044.000">
        <div class="day-number">18</div>
      </td>
    </tr>
    <tr class="calendar-row">
      <td class="calendar-day  green selected" data-date="19.02.2017" data-amount="1044.000">
        <div class="day-number">19</div>
      </td>
      <td class="calendar-day  green selected" data-date="20.02.2017" data-amount="1044.000">
        <div class="day-number">20</div>
      </td>
      <td class="calendar-day  green selected" data-date="21.02.2017" data-amount="1044.000">
        <div class="day-number">21</div>
      </td>
      <td class="calendar-day  green selected" data-date="22.02.2017" data-amount="1044.000">
        <div class="day-number">22</div>
      </td>
      <td class="calendar-day  green" data-date="23.02.2017" data-amount="1044.000">
        <div class="day-number">23</div>
      </td>
      <td class="calendar-day  red" data-date="24.02.2017" data-amount="955.000">
        <div class="day-number">24</div>
      </td>
      <td class="calendar-day  red" data-date="25.02.2017" data-amount="955.000">
        <div class="day-number">25</div>
      </td>
    </tr>
    <tr class="calendar-row">
      <td class="calendar-day  red" data-date="26.02.2017" data-amount="955.000">
        <div class="day-number">26</div>
      </td>
      <td class="calendar-day  red" data-date="27.02.2017" data-amount="955.000">
        <div class="day-number">27</div>
      </td>
      <td class="calendar-day  red" data-date="28.02.2017" data-amount="955.000">
        <div class="day-number">28</div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

希望有人能帮助我！

问候

米。

更新

使用日期解决它：D

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

Answer 1

我自己找到了解决方案，而不是单元格索引，现在我正在使用日期

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