0

Cordial Saludo

Tengo el siguiente codigo html:

<div id="contenido" class="justify-content-center align-items-center">
 <div class="hora hora-no-disponible"><p>12:00 am</p></div>
 <div class="hora hora-no-disponible"><p>1:00 am</p></div>
 <div class="hora hora-no-disponible"><p>2:00 am</p></div>
 <div class="hora hora-no-disponible"><p>3:00 am</p></div>
 <div class="hora hora-no-disponible"><p>4:00 am</p></div>
 <div class="hora hora-no-disponible"><p>5:00 am</p></div>
 <div class="hora hora-no-disponible"><p>6:00 am</p></div>
 <div class="hora hora-no-disponible"><p>7:00 am</p></div>
 <div class="hora hora-no-disponible"><p>8:00 am</p></div>
 <div class="hora hora-no-disponible"><p>9:00 am</p></div>
 <div class="hora hora-no-disponible"><p>10:00 am</p></div>
 <div class="hora hora-no-disponible"><p>11:00 am</p></div>
 <div class="hora" data-numerohoraapp="12:00:00" data-numerohorafinalapp="12:59:59"> <p>12:00 pm</p></div>
 <div class="hora" data-numerohoraapp="13:00:00" data-numerohorafinalapp="13:59:59"><p>1:00 pm</p></div>
 <div class="hora hora-no-disponible"><p>2:00 pm</p></div>
 <div class="hora seleccionado" data-numerohoraapp="15:00:00" data-numerohorafinalapp="15:59:59"><p>3:00 pm</p></div>
 <div class="hora" data-numerohoraapp="16:00:00" data-numerohorafinalapp="16:59:59"><p>4:00 pm</p></div>
 <div class="hora" data-numerohoraapp="17:00:00" data-numerohorafinalapp="17:59:59"><p>5:00 pm</p></div>
 <div class="hora seleccionado" data-numerohoraapp="18:00:00" data-numerohorafinalapp="18:59:59"><p>6:00 pm</p></div>
 <div class="hora seleccionado" data-numerohoraapp="19:00:00" data-numerohorafinalapp="19:59:59"><p>7:00 pm</p></div>
 <div class="hora" data-numerohoraapp="20:00:00" data-numerohorafinalapp="20:59:59"><p>8:00 pm</p></div>
 <div class="hora hora-no-disponible"><p>9:00 pm</p></div>
 <div class="hora hora-no-disponible"><p>10:00 pm</p></div>
 <div class="hora hora-no-disponible"><p>11:00 pm</p></div>

Y tengo la función llamada seleccionarRangoFechas(numeroreserva) que recibe un parámentro llamado numeroreserva que es la cantidad de clic que se deben realizar:

function seleccionarRangoFechas(numeroreserva) {
 if (numeroreserva === 0) {
  $(".hora").click(function () {
  
   $(".hora").removeClass("seleccionado");
   let horaMostrar = $(this).text();
   let aforousado = parseInt($(this).data("aforo"));
   let horario = $(this).data("horario");
   let horaini = $(this).data("horaini");
   let horafin = $(this).data("horafin");

   $(this).addClass("seleccionado");

   $("#HoraReserva").text(horaMostrar);
   $("#spanHoraReserva").removeClass("d-none");
   $("#idHora").val(horario);
   $("#horaini").val(horaini);
   $("#horafin").val(horafin);
 });
} else {
 var divsSeleccionados = [];
 var parrafoSeleccionados = document.getElementById("HoraReserva");
 var horas = document.querySelectorAll(".hora");

 horas.forEach(function (hora) {
   hora.addEventListener("click", function () {
    
     if (hora.classList.contains("hora-no-disponible")) {
       return;
     }
     var aforousado = hora.getAttribute("data-aforo");
    
     if (hora.classList.contains("seleccionado")) {
      hora.classList.remove("seleccionado");
      
      var index = divsSeleccionados.indexOf(hora);
      
      if (index > -1) {
        divsSeleccionados.splice(index, 1);
      }
     } else {          
       if (divsSeleccionados.length < numeroreserva) {            
         if (divsSeleccionados.length === 0) {
           hora.classList.add("seleccionado");
           divsSeleccionados.push(hora);
         } else {
           hora.classList.add("seleccionado");
           divsSeleccionados.push(hora);                
         }
       }
     }
   
     actualizarParrafoSeleccionados();
   });
 });

 function actualizarParrafoSeleccionados() {
   if (divsSeleccionados.length === 0) {
     parrafoSeleccionados.textContent = "Hora"; 
     $("#spanHoraReserva").addClass("d-none"); 
   } else {
     var textoSeleccionado = divsSeleccionados.map(function (div) {
       return div.querySelector("p").textContent;
     }).join(", "); // Une los textos seleccionados con una coma y un espacio
     $("#idHora").val(textoSeleccionado);
     parrafoSeleccionados.textContent = textoSeleccionado;
     $("#spanHoraReserva").removeClass("d-none");
   }
 }
}

Si el parámetro numeroreserva es 3, lo que quiero hacer es que si selecciono el horario 3:00pm-4:00pm-5:00pm me lo permita seleccionar (este proceso ya lo hace) y lo que necesito, por favor, es que si selecciono 3:00pm-5:00pm-6:00pm no lo permita ya que hay un hora de intermedio entre las 3:00pm y 5:00pm.

Les agredezco su ayuda

1
  • 1
    Hola. No sé si entendí el asunto. Pero, ¿no sería mejora trabajar con rangos? Por ejemplo, si tiene posibilidad de rangos de tres horas, le dices que marque la hora inicial y partiendo de ahí le seleccionas las demás horas. Así, si tiene posibilidad de reservar tres horas y marca las 3:00 pm, le marcas de forma automática las 4 y las 5. Repito, no sé si entendí, pero yo lo haría así. Te evitas tanto rollo y es más amigable para el usuario.
    – A. Cedano
    Commented el 9 oct. 2023 a las 21:13

1 respuesta 1

0

El código que dejas no permite entender exactamente qué estás haciendo (el JS tiene errores, y el HTML no es propiamente un selector). Haciendo un experimento con una librería que uso en mis proyectos, te dejo un ejemplo de cómo lo haría yo.

Dado que cada slot de hora puede mapearse numéricamente, el tiempo entre dos slots es simplemente la resta de la hora que representan. Y dado que cada slot es de exactamente una hora, podemos determinar que se han elegido horas disjuntas cuando la cantidad de slots reservados es menor que la diferencia de horas entre la primera y última reservas.

En otras palabras, si reservo a las 10, a las 11 y a las 16, la diferencia entre las puntas es de 6 horas, pero sólo he reservado 3 slots, por lo que necesariamente elegí horas disjuntas. A la inversa, si reservo las 10, 11 y 12, las puntas tienen 2 de diferencia, y yo reservé 3 slots, todo está bien.

(Estoy consciente de que en rigor, el último ejemplo tiene 3 horas de diferencia entre que empieza el slot de las 10 y termina el slot de las 12, pero está bien, por eso mi comparación es estrictamente menor y no menor o igual)

const selector = new TomSelect(document.querySelector('#select_horas'), {
    placeholder:'Seleccione su hora de reserva',
    plugins: {
      'clear_button': {
        'title': 'Remove all selected options',
      }
    },

    multiple: true
  }),
  errorLabel = document.querySelector('label');

selector.on('change', valores => {
  const horaInicio = Math.min(...valores),
    horaFin = Math.max(...valores),
    duracionRango = horaFin - horaInicio,
    horas = valores.length;
  errorLabel.style.visibility = 'hidden'
  if (duracionRango >= horas && horas > 1) {
    errorLabel.style.visibility = 'visible';
  } 

});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>

<label style="float:right;font-size:0.9em;visibility:hidden;color:red;margin-bottom:0.2em;">Error: sólo puede reservar horas consecutivas</label>
<select id="select_horas" multiple>
  <option value="9">9:00 am</option>
  <option value="10">10:00 am</option>
  <option value="11">11:00 am</option>
  <option value="12">12:00 pm</option>
  <option value="13">1:00 pm</option>
  <option value="14">2:00 pm</option>
  <option value="15">3:00 pm</option>
  <option value="16">4:00 pm</option>
  <option value="17">5:00 pm</option>
  <option value="18">6:00 pm</option>
  <option value="19">7:00 pm</option>
  <option value="20">8:00 pm</option>
  <option value="21">9:00 pm</option>
</select>

Esta librería también permite habilitar y deshabilitar opciones programáticamente por si eso es lo que prefieres

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.