2013-03-05 16 views
6

Mam webapp z Primefaces JSF 3.5 i chciałbym mieć suwak zakresu ale z wartości czasu (godzina: minuta) .. jak na tym zdjęciuJSF - zakres suwak z „czasu” Wartości

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

jest to kod na suwak z zakresu liczb całkowitych:

<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}" /> 

gdzie sliderBean.number6 i sliderBean.number7 są liczbami całkowitymi .. myślę, że do tego, co chcę jest przedefiniować funkcję jQuery slajdu wyświetlić wartość zasięgu es i praca z „min” zamiast „godzin” ..

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

ale .. szczerze .. nie wiem jak to zrobić .. (a jeśli jest to poprawny sposób ..) dzięki !

Odpowiedz

0

Mam ułożyła skrzypce który używa jQRangeSlider i momentjs

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"); 
    } 
}); 

Używam momentjs bo jest wielkim biblioteki do czynienia z wartościami datetime o JavaScript, ale nie musisz go użyć, jeśli znasz inną bibliotekę lub po prostu chcesz radzić sobie z natywnymi funkcjami.

Proszę dać mi znać, jeśli masz jakiekolwiek pytania.