6

Primefaces 3.5 を使用した JSF webapp があり、範囲スライダーが必要ですが、時間値 (時間:分) が必要です。この図のように

スライダー 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);
        }
    });
});

しかし..正直なところ..どうすればいいのかわかりません..（そしてこれが正しい方法であれば..）ありがとう！

4

1 に答える 1

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

javascript で datetime 値を処理するための優れたライブラリであるため、momentjs を使用していますが、別のライブラリに精通している場合やネイティブ関数を処理したい場合は、使用する必要はありません。

ご不明な点がございましたら、お知らせください。

于 2013-04-12T16:25:59.870 に答える