only - Slider JQuery UI per tempo




slider ui (3)

Dovrebbero essere solo ore2 <10 e minuti2 <10, non ore2.lunghezza <10 e minuti2.lunghezza <10. Questa è la valutazione del valore numerico e non della lunghezza della stringa.

Ciao Devo implementare un cursore per un intervallo di tempo di 24 ore. Mi piace usare il cursore ui jquery per questo. Ho scritto sotto il codice

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

Mi piace l'intervallo è come 01:00 ---- 01:59

Come ho dato i due punti (:) invece di punto (.). Anche la gamma è andata oltre 59 come 05:85. Per favore aiutami a creare un cursore del tempo


Ecco la mia versione di 24 ore basata su entrambe le risposte per i campi di input

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>

Ecco un esempio:

upplex - webdesign


Non usare ore come unità, usa invece i minuti. Quindi applica un evento slide che converte i minuti in ore:

$(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);
        }
    });
});




uislider