0

Tengo un slider por horas, con el cual me gustaría filtrar div dependiendo de su horario ej:

$("#slider-container2").slider({
    range: true,
    min: 0,
    max: 1440,
    step: 15,
    values: [0, 1440],
    slide: function (e, ui) {
        var hours1 = Math.floor(ui.values[0] / 60);
        var minutes1 = ui.values[0] - (hours1 * 60);
        

        if (hours1.length == 1) hours1 = '0' + hours1;
        if (minutes1.length == 1) minutes1 = '0' + minutes1;
        if (minutes1 == 0) minutes1 = '00';
        if (hours1 >= 12) {
            if (hours1 == 12) {
                hours1 = hours1;
                minutes1 = minutes1 + " PM";
            } else {
                hours1 = hours1 - 12;
                minutes1 = minutes1 + " PM";
            }
        } else {
            hours1 = hours1;
            minutes1 = minutes1 + " AM";
        }
        if (hours1 == 0) {
            hours1 = 12;
            minutes1 = minutes1;
        }



        $('.slider-time').html(hours1 + ':' + minutes1);

        var hours2 = Math.floor(ui.values[1] / 60);
        var minutes2 = ui.values[1] - (hours2 * 60);

        if (hours2.length == 1) hours2 = '0' + hours2;
        if (minutes2.length == 1) minutes2 = '0' + minutes2;
        if (minutes2 == 0) minutes2 = '00';
        if (hours2 >= 12) {
            if (hours2 == 12) {
                hours2 = hours2;
                minutes2 = minutes2 + " PM";
            } else if (hours2 == 24) {
                hours2 = 11;
                minutes2 = "59 PM";
            } else {
                hours2 = hours2 - 12;
                minutes2 = minutes2 + " PM";
            }
        } else {
            hours2 = hours2;
            minutes2 = minutes2 + " AM";
        }
        

        $('.slider-time2').html(hours2 + ':' + minutes2);
        
    }  
});
.red1 {
background-color:red;
color:white;
margin-top: 20px;
}

.green1 {
background-color:green;
color:white;
margin-top: 20px;
}

.yellow1 {
background-color:yellow;
color:black;
margin-top: 20px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<span class="slider-time">10:00 AM</span> - <span class="slider-time2">12:00 PM</span>
<br><br>
<div id="slider-container2"></div>

<br><br>

<div class="red1" data-hour="7:00am">
7:00 AM
</div>

<div class="green1" data-hour="1:45pm">
1:45 PM
</div>

<div class="yellow1" data-hour="6:30pm">
6:30 PM
</div>

¿Cual sería la manera correcta de realizarlo?

0

1 respuesta 1

1

Primero hay que agrupar los divs a filtrar en otro div, en mi caso lo voy a llamar tiempos.

En el deslizador el cambio mínimo es 15 minutos, la cantidad de cuartos de hora que hay en un día es 24 por 4, que eso es 96, pero esa tarea se la dejo a JavaScript.

Para generar el texto 3:00 AM a 5:15 PM hago una serie de cálculos, basado en el cuarto de hora número tal. Ejemplo, si el deslizador está entre las 3 AM y las 5:15 PM, eso internamente son cantidades de cuartos de hora. 3 horas son 12 cuartos, y 5:15 son 5*4 + 1, son 21, a eso se le suma el PM, que son 12 horas multiplicado por 4, es decir, 48, y sumado 21 son 69.

Lo que hago es convertir 12 y 69 mediante una serie de cálculos para que muestre 3:00 AM a 5:15 PM, haciendo la operación inversa. Con operadores ternarios (a==2?b:c) hago comprobaciones para mostrar correctamente cuando es AM o PM, o convertir por ejemplo, 23 en 11 PM.

Para filtrar es muy simple, lo que hago es transformar las horas a números comparables, es decir, 5:15 PM, que son 69 cuartos de hora, lo divido por 4 y da 17,25, ese número lo verifico con los rangos del deslizador, que también los convierto a números decimales. Si coincide con el rango, lo muestra, de lo contrario lo oculta.

La serie de pasos que hago para resolverlo es la siguiente.

  1. Obtengo todos los div que hay en tiempos.

  2. Hago una matriz con los atributos data-hour, en la primera columna los div, en la segunda, las horas.

    [
         [<div ...>, "7:00am"]
        ,[<div ...>, "1:45pm"]
        ,[<div ...>, "6:30pm"]
    ]
    
  3. Le aplico una expresión regular para separar la hora en 3 partes.

    "1:45pm" -> ["1", "45", "pm"]
    
  4. Convierto las 3 partes en un solo número decimal.

    ["1", "45", "pm"] -> 1 + 45/60 + 12 // Solamente en PM se suma 12
    
  5. Uso $(div).hide() o $(div).show() para ocultar o mostrar según el número decimal esté entre el rango del deslizador.

Código:

$("#slider-container").slider({
	range: true,
	min: 0,
	max: 24*4,
	step: 1,
	values: [0, 24*4],
	slide: function (e, ui) {
		var horas_slider = ui.values.map(x=>x/4)
		var horas_slider_formateado = horas_slider.map(
			x=>Math.floor(x>=13?x%12:x)
				+":"+(((x%1)*60+100)+"").slice(1)
				+" "+(x>=12&x<24?"PM":"AM")
		).join(" a ")
		$(".slider-time").html(horas_slider_formateado)
		var horas_contenidos = (
			Array.from($("#tiempos>div"))
			.map(x=>[x,$(x)
				.attr("data-hour")
				.match(/\d+|[a-z]+/g)
			]).map(
				x=>[x[0],
				+x[1][0]+(+x[1][1]/60)+(+(x[1][2]=="pm")*12)]
			).map(x=>{
				if((x[1]>=horas_slider[0]&&x[1]<=horas_slider[1])){
					$(x[0]).show()
				}else{
					$(x[0]).hide()
				}
			})
		)
	}
});
.rojo {
	background-color: red;
	color: white;
	margin-top: 20px;
}
.verde {
	background-color: green;
	color: white;
	margin-top: 20px;
}
.amarillo {
	background-color: yellow;
	color: black;
	margin-top: 20px;
}
.deslizador {
	margin-left: 10px;
	margin-right: 10px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<p class="slider-time">0:00 AM a 0:00 AM</p>

<div id="slider-container" class="deslizador"></div>

<div id="tiempos" >
  <div class="rojo" data-hour="7:00am">7:00 AM</div>
  <div class="verde" data-hour="1:45pm">1:45 PM</div>
  <div class="amarillo" data-hour="6:30pm">6:30 PM</div>
</div>

7
  • Excelente! Funcionando! Una duda: En el código anterior se mostraban las horas en formato 24. Ej: 22:00 PM, y ahora en formato 12 (10:00 PM). Hay alguna manera de volver al formato 24?
    – Elias Aria
    Commented el 17 feb. 2019 a las 18:18
  • @EliasAria Pones var horas_slider_formateado = horas_slider y borras desde map hasta el join, y el join lo mantienes.
    – user13558
    Commented el 17 feb. 2019 a las 18:59
  • 1
    @EliasAria Ah, cierto... Tiene que quedar así. var horas_slider_formateado = horas_slider.map(x=>Math.floor(x)+":"+(((x%1)*60+100)+"").slice(1)).join(" a ")
    – user13558
    Commented el 17 feb. 2019 a las 19:49
  • 1
    @EliasAria Es que el formato de 24 horas no necesita tener AM o PM, porque es más general. No hay que ponerlo.
    – user13558
    Commented el 17 feb. 2019 a las 19:56
  • 1
    excelente! Quedó funcionando correctamente así! Gracias!
    – Elias Aria
    Commented el 17 feb. 2019 a las 19:59

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.