JQuery select & reset (clear) date range in HTML Calendar-CodePudding

I use a HTML calendar in which you can select a date range. Unfortunately it is not possible to delete a selected range. My idea would be to solve this with even and odd:

First click (odd) select first day
Second click (even) select range
Third click (odd) delete all selects and select new first day
Fourth click (even) select new range
...

I am glad about tips and help. I can't get any further on my own.

$(document).ready(function() {
  $('td.day').click(function() {
    if ($("td.firstClick").length == 0) {
      $(this).addClass("firstClick");
    }
  });

  $('td.day').hover(function() {
    if ($("td.firstClick").length == 0) {
      $(this).addClass("selected");
      return;
    }
    
    $(this).addClass("secondClick");
    var tds = $('td.day');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    tds.filter(function() {
      var idx = tds.index(this);
      return idx >= firstClickIndex && idx <= currentIndex;
    }).addClass("selected")
  }, function() {
    if ($("td.firstClick").length == 0) {
      $(this).removeClass("selected");
      return;
    }

    $(this).removeClass("secondClick");
    var tds = $('td.day');
    var firstClick = $(".firstClick");
    var firstClickIndex = tds.index(firstClick);
    var currentIndex = tds.index(this);
    tds.filter(function() {
      var idx = tds.index(this);
      return idx >= firstClickIndex && idx <= currentIndex;
    }).removeClass("selected")
  });

  $('table').on('click', 'td.secondClick', function() {
    $('.selected').addClass('reserved');
  });
});

table {
  border-collapse: collapse;
}
table tr td {
  width: 14%;
}
table tr td:hover {
  cursor: pointer;
}
.firstClick {
  background: green;
}
.selected {
  background: lightgreen;
}
.reserved {
  background: red !important;
}
.secondClick {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td colspan="7"><b>2016</b>
    </td>
  </tr>
  <tr>
    <td colspan="7"><i>November</i>
    </td>
  </tr>
  <tr>
    <th>mon</th>
    <th>tue</th>
    <th>wed</th>
    <th>thu</th>
    <th>fri</th>
    <th>sat</th>
    <th>sun</th>
  </tr>
  <tr>
    <td></td>
    <td >1</td>
    <td >2</td>
    <td >3</td>
    <td >4</td>
    <td >5</td>
    <td >6</td>
  </tr>
  <tr>
    <td >7</td>
    <td >8</td>
    <td >9</td>
    <td >10</td>
    <td >11</td>
    <td >12</td>
    <td >13</td>
  </tr>
  <tr>
    <td >14</td>
    <td >15</td>
    <td >16</td>
    <td >17</td>
    <td >18</td>
    <td >19</td>
    <td >20</td>
  </tr>
  <tr>
    <td >21</td>
    <td >22</td>
    <td >23</td>
    <td >24</td>
    <td >25</td>
    <td >26</td>
    <td >27</td>
  </tr>
  <tr>
    <td >28</td>
    <td >29</td>
    <td >30</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CodePudding user response：

remove class reserved, selected and secondClick in td.day click function to remove range selected before

$('td.day').click(function() {
  if ($("td.firstClick").length == 0) {
    $('td.day').removeClass("reserved");
    $('td.day').removeClass("selected");
    $('td.day').removeClass("secondClick");
    $(this).addClass("firstClick");
  }
});

and in table td.secondClick click function remove class firstClick to reinit new firstClick

$('table').on('click', 'td.secondClick', function() {
  $('.selected').addClass('reserved');
  $('td.day').removeClass("firstClick");
});