JQuery UI滑块的时间

您好，我需要实现一个24小时的时间范围滑块。我喜欢使用jquery ui滑块。我已经写了下面的代码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。请帮助我创建一个时间滑块

来源

2010-02-17 Nisanth Kumar

不要使用小时作为单位，而应使用分钟。然后申请一个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); 
     } 
    }); 
});

来源

2010-02-17 10:24:47

嗨它的工作很好..非常感谢你.. 注意：hours.length没有工作4我。我使用hours.toString（）。length – 2010-02-17 10:46:37

非常有用....谢谢 – RajeshKdev 2012-03-07 12:01:17

非常好，谢谢 – Kevin 2013-07-08 20:13:36

提高对大度的回答，让时间范围内的“平民化的时候，”有一个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); 
      } 
    });

来源

2013-06-20 21:12:32

我试过了，它工作，虽然我有几条评论。 Javascript包含了'hours1 = hours1'和'minutes1 = minutes1'等代码，我的开发环境有趣地称之为'奇怪的赋值'。此外，JSfiddle中的CSS包含一些长而破碎且相当可疑的URL。 – paulo62 2015-08-06 12:39:17

@ paulo62 - css中的URL称为数据URI（https://css-tricks.com/data-uris/），“奇怪的任务”绝对是奇怪的，我想我已经把它们作为教学设备，以说明在这些情况下，这些值保持不变。 – 2015-08-07 15:09:26

这是我根据这两个问题的答案输入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>

这里举一个例子：

upplex - webdesign

来源

2013-08-04 01:56:54 upplex

我怎么能把它变成一个时间选择器（VS时间范围选取器）？换句话说，我怎样才能摆脱上限呢？ – Greg 2014-05-23 13:32:44

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

来源

2015-03-02 08:08:17 Gilman

JQuery UI滑块的时间

回答

相关问题