La IceKid La IceKid - 23 days ago 10
CSS Question

HTML Calendar select date range with Jquery

I have calendar html table and want that first click select start date and second click select end date. Until i click end date it must show me range from start date to cursor position. All these are working if tds that i am selecting is in same tr. Please help me to select tds across ant tr. Thanks



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

$('td.day').mouseleave(function() {
$(this).removeClass("secondClick");
$("td.firstClick").nextUntil(this).removeClass("selected");
});

$('td.secondClick').click(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 class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<tr>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
</tr>
<tr>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
</tr>
<tr>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
</tr>
<tr>
<td class="day">28</td>
<td class="day">29</td>
<td class="day">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>




Answer

You can use .index() along with .filter() to get the target element.

//Cache elements 
var tds = $('td.day'); 
var firstClick = $(".firstClick");

//Get of various elements
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);

//Filter element where index is greater that firstClick  and less-than equal to clicked element index
var filteredElements = tds.filter(function() {
  var idx = tds.index(this);
  return idx >= firstClickIndex && idx <= currentIndex;
});

//Perform the desired operation
filteredElements.addClass("selected")

Use Event Delegation when generating elements manipulation selector (like removing and adding classes).

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

$(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 class="day">1</td>
    <td class="day">2</td>
    <td class="day">3</td>
    <td class="day">4</td>
    <td class="day">5</td>
    <td class="day">6</td>
  </tr>
  <tr>
    <td class="day">7</td>
    <td class="day">8</td>
    <td class="day">9</td>
    <td class="day">10</td>
    <td class="day">11</td>
    <td class="day">12</td>
    <td class="day">13</td>
  </tr>
  <tr>
    <td class="day">14</td>
    <td class="day">15</td>
    <td class="day">16</td>
    <td class="day">17</td>
    <td class="day">18</td>
    <td class="day">19</td>
    <td class="day">20</td>
  </tr>
  <tr>
    <td class="day">21</td>
    <td class="day">22</td>
    <td class="day">23</td>
    <td class="day">24</td>
    <td class="day">25</td>
    <td class="day">26</td>
    <td class="day">27</td>
  </tr>
  <tr>
    <td class="day">28</td>
    <td class="day">29</td>
    <td class="day">30</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>