2013-03-05 30 views
6

Tôi có webapp JSF với Primefaces 3.5 và tôi muốn có một thanh trượt nhiều nhưng với giá trị thời gian (giờ: phút) .. như trong ảnh nàyJSF - phạm vi thanh trượt với "thời gian" đánh giá cao

slider http://img547.imageshack.us/img547/3112/timeslider.jpg

đây là mã cho một thanh trượt loạt với các giá trị số nguyên:

<h:panelGrid columns="1" style="margin-bottom:10px">      
    <h:outputText id="displayRange" value="Between #{sliderBean.number6} and #{sliderBean.number7}"/>      
    <p:slider for="txt6,txt7" display="displayRange" style="width:400px" range="true" 
       displayTemplate="Between {min} and {max}"/> 
</h:panelGrid> 
<h:inputHidden id="txt6" value="#{sliderBean.number6}" /> 
<h:inputHidden id="txt7" value="#{sliderBean.number7}" /> 

nơi sliderBean.number6 và sliderBean.number7 là số nguyên .. tôi nghĩ rằng để làm những gì tôi muốn là để xác định lại chức năng jquery trượt mà hiển thị phạm vi valu es và làm việc với "phút" thay vì "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.length == 1) hours = '0' + hours; 
      if(minutes.length == 1) minutes = '0' + minutes; 

      $('#displayRange').html(hours+':'+minutes); 
     } 
    }); 
}); 

nhưng .. thật .. tôi không biết làm thế nào để làm .. (và nếu điều này là cách chính xác ..) nhờ !

Trả lời

0

tôi đã đặt cùng một fiddle sử dụng jQRangeSlidermomentjs

http://jsfiddle.net/tPMsv/7/

$("#slider").dateRangeSlider({ 
    bounds: { 
     min: moment().startOf("day").toDate(), 
     max: moment().endOf("day").toDate() 
    }, 
    defaultValues: { 
     min: moment().startOf("day").add("hours",6).toDate(), 
     max: moment().endOf("day").subtract("hours",6).toDate() 
    }, 
    formatter: function (value) { 
     return moment(value).format("HH:mm"); 
    } 
}); 

Tôi đang sử dụng momentjs vì là một thư viện tuyệt vời để đối phó với các giá trị datetime trên javascript, nhưng bạn không phải sử dụng nó nếu bạn đã quen với một thư viện khác hoặc chỉ muốn xử lý các hàm gốc.

Vui lòng cho tôi biết nếu bạn có bất kỳ câu hỏi nào.

Các vấn đề liên quan