jquery - bootstrap - slider js

JQuery UI Slider por tiempo

Question

Hola, necesito implementar un control deslizante para un rango de tiempo de 24 horas. Me gusta usar el control deslizante de jquery ui para esto. He escrito el código a continuación

<script type="text/javascript">
$(function() {
$(".slider-range").slider({
range: true,
min: 0,
max: 23.59,
step: 0.15
});
});
</script>

Me gusta el rango es como 01:00 ---- 01:59

Cómo le di el colon (:) en lugar de punto (.). También el rango waas ha ido más allá de 59 como 05:85. Por favor, ayúdame a crear un deslizador de tiempo

Answer 1

Aquí está mi versión de 24 horas basada en ambas respuestas para campos de entrada

Javascript

jQuery(function() {
jQuery(''#slider-time'').slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [ 600, 1200 ],
slide: function( event, ui ) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if(hours1.length < 10) hours1= ''0'' + hours;
if(minutes1.length < 10) minutes1 = ''0'' + minutes;
if(minutes1 == 0) minutes1 = ''00'';
var hours2 = Math.floor(ui.values[1] / 60);
var minutes2 = ui.values[1] - (hours2 * 60);
if(hours2.length < 10) hours2= ''0'' + hours;
if(minutes2.length < 10) minutes2 = ''0'' + minutes;
if(minutes2 == 0) minutes2 = ''00'';
jQuery(''#amount-time'').val(hours1+'':''+minutes1+'' - ''+hours2+'':''+minutes2 );
}
});
});

HTML

<label for="amount-time">Time</label>
<input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/>
<div id="slider-time"></div><br>

Aquí un ejemplo:

upplex - diseño web

Answer 2

Mejorando la respuesta de Tatu, para obtener el rango de tiempo en "tiempo civil", con un reloj de 12 horas y designaciones AM y PM. Aquí hay un JSFIDDLE

* Actualización: cambié el código ligeramente para que el valor mínimo se muestre como "12:00 AM" y el valor máximo como "11:59 PM". El violín también se actualiza ...

 $( "#slider-range" ).slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [ 600, 720 ], //or whatever default time you want
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);
}
});

Answer 3

No use horas como una unidad, use minutos en su lugar. A continuación, aplique un evento de slide que convierta los minutos en horas:

$(function() {
$(".slider-range").slider({
range: true,
min: 0,
max: 1440,
step: 15,
slide: function(e, ui) {
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);
if(hours.toString().length == 1) hours = ''0'' + hours;
if(minutes.toString().length == 1) minutes = ''0'' + minutes;
$(''#something'').html(hours+'':''+minutes);
}
});
});

Answer 4

Solo debería ser horas2 <10 y minutos2 <10, no horas2.length <10 y minutes2.length <10. Esto es una evaluación del valor numérico, no de la longitud de la cadena.