用于时间的 JQuery UI 滑块

Posted 2023-02-18

【中文标题】用于时间的 JQuery UI 滑块

【英文标题】：JQuery UI Slider for time

【发布时间】：2011-01-17 19:08:26

【问题描述】：

您好，我需要实现一个 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

我如何使用冒号（:) 而不是点（.) .范围也超过了 59 像 05:85 。请帮我创建一个时间滑块

【参考方案1】：

不要使用小时作为单位，而是使用分钟。然后应用将分钟转换为小时的slide 事件：

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

【讨论】：

您好，它工作正常.. 非常感谢您.. 注意：hours.length 不起作用 4 me 。我使用 hours.toString().length

需要添加的一件事是在检查它们的长度之前将小时和分钟转换为字符串，这样您就可以得到“00”分钟而不是单独的“0”。 var分钟=分钟+“”； //在str.length之前

答案似乎非常好，但非常需要fidde示例..请帮助我使用小提琴示例

各位能帮我解决这个问题吗。***.com/questions/45350964/…

【参考方案2】：

改进 Tatu 的答案，以“民用时间”获取时间范围，使用 12 小时制和 AM 和 PM 指定。这是JSFIDDLE

*更新 - 我稍微更改了代码，使最小值显示为“12:00 AM”，最大值显示为“11:59 PM”。小提琴也更新了……

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

【讨论】：

我试过这个并且它有效，虽然我有几个 cmets。 Javascript 包含诸如“hours1=hours1”和“minutes1=minutes1”之类的代码，我的开发环境有趣地称之为“奇怪的分配”。此外，JSfiddle 中的 CSS 包含几个长的、损坏的且相当可疑的 URL。

@paulo62 - css 中的 url 被称为 Data URIs (css-tricks.com/data-uris) 并且“奇怪的作业”绝对是奇怪的，我想我已经把它们作为教学设备来说明这一点在这些情况下，值保持不变。

【参考方案3】：

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

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>

【讨论】：

我怎样才能把它变成一个时间选择器（VS一个时间范围选择器）？换句话说，我怎样才能摆脱时间上限？

【参考方案4】：

它应该只是 hours2