jquery - bootstrap - slider js
JQuery UI Slider por tiempo (4)
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:
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
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);
}
});
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);
}
});
});
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.