web-dev-qa-db-fra.com

Jquery ui curseur pour le temps

Bonjour, j'ai besoin d'implémenter un curseur pendant une plage de temps de 24 heures. J'aime utiliser le curseur JQuery UI pour cela. J'ai écrit ci-dessous le code

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

J'aime la gamme est comme 01:00 ---- 01:59

Comment j'ai donné le côlon (:) au lieu de points (.). Aussi la gamme WaaS allée au-delà de 59 05:85. Aidez-moi s'il vous plaît à créer un curseur de temps

jqueryjquery-uijquery-pluginsslideruislider
23
Nisanth Kumar

N'utilisez pas d'heures comme unité, utilisez des minutes à la place. Appliquez ensuite un événement slide qui convertit les minutes en heures:

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

Améliorer la réponse de Tatu, pour obtenir la gamme de temps en "temps civile", avec une horloge de 12 heures et AM et PM Désignations. Voici un [~ # ~ # ~ # ~ # ~ # ~ # ~ # ~ # ~] jsfiddle [ ~ # ~]

* Mise à jour - J'ai changé le code légèrement de sorte que la valeur minimale s'affiche comme "12h00" et la valeur max s'affiche comme "11h59". Le violon est également mis à jour ...

    $( "#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);
            }
    });
20
Jeff Weinberg

Il devrait simplement être des heures2 <10 et des minutes 2 <10, pas des heures 2.Longueur <10 et minutes 2.Longueur <10. Ceci est l'évaluation de la valeur numérique non de la longueur de la chaîne.

0
Gilman