JSF - 带有“时间”值的范围滑块

Posted 2023-02-22

【中文标题】JSF - 带有“时间”值的范围滑块

【英文标题】：JSF - range slider with "time" values

【发布时间】：2013-02-19 16:20:45

【问题描述】：

我有带有 Primefaces 3.5 的 JSF webapp，我想要一个范围滑块，但有时间值（小时：分钟）.. 就像这张图片中的那样

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

这是具有整数值的范围滑块的代码：

<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 是整数.. 我认为要做我想做的就是重新定义显示范围值并使用“分钟”而不是“小时”的jquery幻灯片函数..

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

但是..老实说..我不知道该怎么做..（如果这是正确的方法..） 谢谢！

【参考方案1】：

我整理了一个使用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 是因为它是一个很棒的库来处理 javascript 上的日期时间值，但是如果您熟悉另一个库或只想处理本机函数，则不必使用它。

如果您有任何问题，请告诉我。