JQuery UI Slider trong thời gian

Question

Xin chào Tôi cần triển khai thanh trượt trong phạm vi thời gian 24 giờ. Tôi thích sử dụng thanh trượt jquery ui cho việc này. Tôi đã viết mã dưới đây

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

Tôi thích phạm vi là như 01:00 ---- 01:59

Làm thế nào tôi đã cung cấp các dấu hai chấm (:) thay vì dấu chấm (.) . Ngoài ra phạm vi waas đi xa hơn 59 như 05:85. Vui lòng giúp tôi tạo thanh trượt thời gian

Answer 1

Không sử dụng giờ làm đơn vị, sử dụng số phút thay thế. Sau đó áp dụng một sự kiện slide có thể chuyển đổi các phút đến vài giờ:

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

Cải thiện về câu trả lời của Tatu, để có được những khoảng thời gian trong "thời gian dân sự", với một chiếc đồng hồ 12 giờ và AM và PM định danh. Đây là JSFIDDLE

* Cập nhật - Tôi đã thay đổi mã một chút để giá trị nhỏ nhất hiển thị là "12:00 AM" và giá trị tối đa hiển thị là "11:59 PM". Fiddle cũng được cập nhật ...

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

Đây là phiên bản 24 giờ của tôi dựa trên cả các câu trả lời cho các lĩnh vực đầu vào

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> 

Dưới đây là ví dụ:

upplex - webdesign

Answer 4

Nó chỉ nên hours2 < 10 và minutes2 < 10, không hours2.length < 10 và minutes2.length < 10. Đây là đánh giá giá trị số không chuỗi dài.