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滑塊的時間

回答

相關問題