Question

嗨，我需要实现一个24小时时间范围的滑块。我想要使用jquery ui滑块来实现。我已经编写了下面的代码。

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

我喜欢的范围是01:00至01:59。

How i gave the colon(:) instead of dot(.) . Also the range waas gone beyond 59 like 05:85 . Please help me to create a time slider

Answer 1

不要使用小时作为单位，改用分钟。然后应用一个“滑动”事件，将分钟转换为小时：

$(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 2

改进Tatu的回答，以获得“民用时间”的时间范围，使用12小时制的时钟和AM和PM的标识。这是一个JSFIDDLE。

更新-我稍微更改了代码，使最小值显示为“上午12:00”，最大值显示为“下午11:59”。 Fiddle也已更新...

    $( "#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

这是我的基于输入字段答案的24小时版本。

Javascript的中文翻译为“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>

Answer 4

这应该只是小时2 < 10和分钟2 < 10，而不是小时2.length < 10和分钟2.length < 10。这是数值评估，而不是字符串长度。

友情链接