JQuery UI Slider por tiempo

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 a continuación códigoJQuery UI Slider por tiempo

<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 me dio los dos puntos (:) en lugar de punto (.) . También el rango waas ha ido más allá de 59 como 05:85. Ayúdenme a crear un control deslizante de tiempo

Fuente

2010-02-17 Nisanth Kumar

No use las horas como una unidad, use minutos en su lugar. A continuación, aplicar un evento slide que convierte los minutos a 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); 
     } 
    }); 
});

Fuente

2010-02-17 10:24:47

Hola, está funcionando bien ... muchas gracias .. Nota: hours.length no funcionó 4 veces. Uso hours.toString(). Length –

Muy útil .... Gracias – RajeshKdev

Excelente, gracias – Kevin

La mejora en la respuesta de Tatu, para obtener el intervalo de tiempo en "tiempo civil", con un reloj de 12 horas y de las denominaciones de 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); 
      } 
    });

Fuente

2013-06-20 21:12:32

Intenté esto y funcionó, aunque tengo un par de comentarios. El Javascript contiene código como 'hours1 = hours1' y 'minutes1 = minutes1', que mi entorno de desarrollo llama graciosamente 'asignación extraña'. Además, el CSS en JSfiddle contiene un par de URL largas, rotas y bastante sospechosas. – paulo62

@ paulo62 - Las urls en el CSS se llaman URI de Datos (https://css-tricks.com/data-uris/) y las "asignaciones extrañas" son definitivamente raras, creo que las he puesto como dispositivos de enseñanza, para ilustrar que en esos casos los valores permanecen iguales. –

aquí está mi versión de 24 horas sobre la base de las dos 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 - webdesign

Fuente

2013-08-04 01:56:54 upplex

¿Cómo podría convertir esto en un selector de tiempo (VS un selector de rango de tiempo)? En otras palabras, ¿cómo podría librarme del límite superior de tiempo? – Greg

Debe ser sólo horas2 < 10 y 10 minutos2 <, no hours2.length < 10 y minutes2.length < 10. Esta es la evaluación del valor numérico no longitud de la cadena.

Fuente

2015-03-02 08:08:17 Gilman

Respuesta

Cuestiones relacionadas