Desarrollo un calendario, y quiero simular la funcion de un "calendar range", es decir, seleccionar una fecha incio y una fecha fin, como esto
Para el calendario, está en una tabla html
<div id="dncalendar-body" class="dncalendar-body">
<table>
<thead>
<tr>
<td>D</td>
<td>L</td>
<td>M</td>
<td>M</td>
<td>J</td>
<td>V</td>
<td>S</td>
</tr>
</thead>
<tbody>
<tr>
<td class="" data-date="30" data-month="9" data-year="2018">
<div class="entry">30</div>
</td>
<td class="" data-date="1" data-month="10" data-year="2018">
<div class="entry">1</div>
</td>
<td class="" data-date="2" data-month="10" data-year="2018">
<div class="entry">2</div>
</td>
<td class="" data-date="3" data-month="10" data-year="2018">
<div class="entry">3</div>
</td>
<td class="" data-date="4" data-month="10" data-year="2018">
<div class="entry">4</div>
</td>
<td class="" data-date="5" data-month="10" data-year="2018">
<div class="entry">5</div>
</td>
<td class="" data-date="6" data-month="10" data-year="2018">
<div class="entry">6</div>
</td>
</tr>
<tr>
<td class="" data-date="7" data-month="10" data-year="2018">
<div class="entry">7</div>
</td>
<td class="" data-date="8" data-month="10" data-year="2018">
<div class="entry">8</div>
</td>
<td class="" data-date="9" data-month="10" data-year="2018">
<div class="entry">9</div>
</td>
<td class="" data-date="10" data-month="10" data-year="2018">
<div class="entry">10</div>
</td>
<td class="" data-date="11" data-month="10" data-year="2018">
<div class="entry">11</div>
</td>
<td class="" data-date="12" data-month="10" data-year="2018">
<div class="entry">12</div>
</td>
<td class="" data-date="13" data-month="10" data-year="2018">
<div class="entry">13</div>
</td>
</tr>
<tr>
<td class="" data-date="14" data-month="10" data-year="2018">
<div class="entry">14</div>
</td>
<td class="" data-date="15" data-month="10" data-year="2018">
<div class="entry">15</div>
</td>
<td id="calendarClick" class=" today-date calendarClick" data-date="16" data-month="10" data-year="2018">
<div class="entry" data-title="hoy">16</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="17" data-month="10" data-year="2018">
<div class="entry">17</div>
</td>
<td id="" class="" data-date="18" data-month="10" data-year="2018">
<div class="entry">18</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="19" data-month="10" data-year="2018">
<div class="entry">19</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="20" data-month="10" data-year="2018">
<div class="entry">20</div>
</td>
</tr>
<tr>
<td id="calendarClick" class=" calendarClick" data-date="21" data-month="10" data-year="2018">
<div class="entry">21</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="22" data-month="10" data-year="2018">
<div class="entry">22</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="23" data-month="10" data-year="2018">
<div class="entry">23</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="24" data-month="10" data-year="2018">
<div class="entry">24</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="25" data-month="10" data-year="2018">
<div class="entry">25</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="26" data-month="10" data-year="2018">
<div class="entry">26</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="27" data-month="10" data-year="2018">
<div class="entry">27</div>
</td>
</tr>
<tr>
<td id="calendarClick" class=" calendarClick" data-date="28" data-month="10" data-year="2018">
<div class="entry">28</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="29" data-month="10" data-year="2018">
<div class="entry">29</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="30" data-month="10" data-year="2018">
<div class="entry">30</div>
</td>
<td id="calendarClick" class=" calendarClick" data-date="31" data-month="10" data-year="2018">
<div class="entry">31</div>
</td>
<td id="calendarClick" class=" " data-date="1" data-month="11" data-year="2018">
<div class="entry">1</div>
</td>
<td id="calendarClick" class=" " data-date="2" data-month="11" data-year="2018">
<div class="entry">2</div>
</td>
<td id="calendarClick" class=" " data-date="3" data-month="11" data-year="2018">
<div class="entry">3</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/MDcalendar.js"></script>
</body></html>
utilizo la funcion .slice de jquery.
$('table tbody td').slice(1,5).addClass("range");
y lo hago con los index de las celdas de la tabla, pero, por ejemplo el index del dia 22 es el mismo para el siguiente mes, con un día diferente
Es posible utilizar los "data" de las celdas como index en la funcion slide