2013-03-05 4 views
6

मैं Primefaces 3.5 के साथ JSF webapp है और मैं एक सीमा स्लाइडर लेकिन समय मान (घंटे: मिनट) के साथ करना चाहते हैं को महत्व देता है .. इस तस्वीरJSF - "समय" के साथ सीमा स्लाइडर

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

में के रूप में

इस पूर्णांक मूल्यों के साथ एक सीमा स्लाइडर के लिए कोड है: jQuery स्लाइड समारोह को फिर से परिभाषित करने के लिए किया जाता है

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

जहां sliderBean.number6 और sliderBean.number7 पूर्णांक हैं .. मैं लगता है कि मैं क्या चाहता हूं कि रेंज वैल्यू प्रदर्शित करें es और "मिनट" के बदले "घंटे" के साथ काम ..

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

लेकिन .. ईमानदारी से .. मैं कैसे करना है पता नहीं है .. (और अगर यह सही तरीका है ..) धन्यवाद !

उत्तर

0

मैं एक साथ एक बेला का उपयोग करता है डाल दिया है jQRangeSlider और 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"); 
    } 
}); 

मैं momentjs उपयोग कर रहा हूँ क्योंकि जावास्क्रिप्ट पर datetime मूल्यों से निपटने के लिए एक महान पुस्तकालय है, लेकिन तुम नहीं यदि आप किसी अन्य पुस्तकालय से परिचित हैं या सिर्फ देशी कार्यों से निपटना चाहते हैं तो इसका उपयोग करना होगा।

यदि आपके कोई प्रश्न हैं तो कृपया मुझे बताएं।

संबंधित मुद्दे