Use data-values in function .slice - JQuery

1

I develop a calendar, and I want to simulate the function of a "calendar range", that is, select a start date and end date, like this

For the calendar, it's in an html table

<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>

I use the .slice function of jquery.

$('table tbody td').slice(1,5).addClass("range");

and I do it with the indexes of the cells in the table, but, for example, the index of day 22 is the same for the following month, with a different day

It is possible to use the "data" of the cells as index in the slide function

    
asked by Ernesto Emmanuel Yah Lopez 18.10.2018 в 17:49
source

1 answer

1

I made this snippet using the slice function, but capturing the global index of the start date and the end date. Take a look:

let initIndex = null;
let finalIndex = null;

$(document).ready(function(){
  // Capturar evento click de las celdas del tbody
  $('table tbody td').click(function(){
    // Obtener el índice de la celda,
    // respecto a las demás celdas de la tabla
    let tdIndex = $('table tbody td').index(this);
    
    // Validar si se está escogiendo un nuevo rango de fecha
    // o si ya se escogió fecha final
    if(initIndex == null || finalIndex != null) {
      // Limpiar los estilos de todas las celdas de selección
      $('.primeraFecha').removeClass('primeraFecha');
      $('.ultimaFecha').removeClass('ultimaFecha');
      $('.fechaSeleccionada').removeClass('fechaSeleccionada');
      
      // Asignar el índice de la celda y limpiar el índice
      // de la fecha fin
      initIndex = tdIndex;
      finalIndex = null;
      
      // Agregar el estilo a la primera celda
      $(this).addClass('primeraFecha');
    } else {
      // Si el índice seleccionado es menor al ínidce de inicio
      // significa que la fecha de inicio es menor
      if(tdIndex < initIndex){
        // Limpiar el estilo de la fecha inicial anterior
        $('.primeraFecha').removeClass('primeraFecha');
        
        // Asignar el índice de la celda y limpiar el índice
        // de la fecha fin
        initIndex = tdIndex;
        finalIndex = null;
        
        // Agregar el estilo a la primera celda
        $(this).addClass('primeraFecha');
        
      // Si el índice seleccionado es igual al ínidce de inicio
      // significa que la fecha de inicio es la misma
      } else if(initIndex == tdIndex) {
      
        // Limpiar la fecha de inicio seleccionada
        initIndex = null;
        $(this).removeClass('primeraFecha');
        
      // Si el índice seleccionado es menor al ínidce de inicio
      // significa que se seleccionó fecha de fin
      } else {
      
        // Agregar estilo de fecha de fin
        $(this).addClass('ultimaFecha');
        finalIndex = tdIndex;
          
        // Si se encuentra dentro del rango de fechas, asignar
        // estilo de celda de fecha de rango
        $('table tbody td').slice(initIndex, finalIndex).addClass('fechaSeleccionada');
      }
    }
  });
});
table {
  border-collapse: collapse;
}

table thead td {
  font-weight: bolder;
}

table td div{
  padding: 5px;
  text-align: center;
}

table tbody td {
  cursor: pointer;
  padding: 2px 0;
}

table tbody td:hover {
  text-decoration: underline;
  background: rgba(250, 165, 29, 0.5);
}

.primeraFecha div{
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.ultimaFecha div{
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.primeraFecha div, .ultimaFecha div, .fechaSeleccionada div{
  background-color: #faa51d;
  color: #fff;
}

.primeraFecha:hover, .ultimaFecha:hover, .fechaSeleccionada:hover{
  text-decoration: underline solid #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
    
answered by 25.10.2018 / 20:31
source