23

こんにちは私は24時間の時間範囲のスライダーを実装する必要があります。これにはjqueryuiスライダーを使用するのが好きです。私は以下のコードを書きました

<script type="text/javascript">
$(function() {
    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 23.59,
        step: 0.15
    });
});
</script>

私は範囲が01:00----01:59のようなものが好きです

dot（。）の代わりにコロン（:)を付けた方法。また、範囲は05:85のように59を超えました。タイムスライダーの作成を手伝ってください

4

4 に答える 4

50

時間を単位として使用せず、代わりに分を使用してください。次にslide、分を時間に変換するイベントを適用します。

$(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.toString().length == 1) hours = '0' + hours;
            if(minutes.toString().length == 1) minutes = '0' + minutes;

            $('#something').html(hours+':'+minutes);
        }
    });
});
于 2010-02-17T10:24:47.103 に答える
20

Tatuの回答を改善し、12時間制と午前と午後の指定を使用して、「民間時間」の時間範囲を取得します。これがJSFIDDLEです

*更新-最小値が「12:00AM」と表示され、最大値が「11:59 PM」と表示されるように、コードを少し変更しました。フィドルも更新されます...

    $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 1440,
            step: 15,
            values: [ 600, 720 ], //or whatever default time you want
            slide: function(e, ui) {
                var hours1 = Math.floor(ui.values[0] / 60);
                var minutes1 = ui.values[0] - (hours1 * 60);

                if(hours1.length == 1) hours1 = '0' + hours1;
                if(minutes1.length == 1) minutes1 = '0' + minutes1;
                if(minutes1 == 0) minutes1 = '00';

                if(hours1 >= 12){

                    if (hours1 == 12){
                        hours1 = hours1;
                        minutes1 = minutes1 + " PM";
                    }
                    else{
                        hours1 = hours1 - 12;
                        minutes1 = minutes1 + " PM";
                    }
                }

                else{

                    hours1 = hours1;
                    minutes1 = minutes1 + " AM";
                }
                if (hours1 == 0){
                    hours1 = 12;
                    minutes1 = minutes1;
                }

                $('.slider-time').html(hours1+':'+minutes1);

                var hours2 = Math.floor(ui.values[1] / 60);
                var minutes2 = ui.values[1] - (hours2 * 60);

                if(hours2.length == 1) hours2 = '0' + hours2;
                if(minutes2.length == 1) minutes2 = '0' + minutes2;
                if(minutes2 == 0) minutes2 = '00';
                if(hours2 >= 12){
                    if (hours2 == 12){
                        hours2 = hours2;
                        minutes2 = minutes2 + " PM";
                    }
                    else if (hours2 == 24){
                        hours2 = 11;
                        minutes2 = "59 PM";
                    }
                    else{
                        hours2 = hours2 - 12;
                        minutes2 = minutes2 + " PM";
                    }
                }
                else{
                    hours2 = hours2;
                    minutes2 = minutes2 + " AM";
                }

                $('.slider-time2').html(hours2+':'+minutes2);
            }
    });
于 2013-06-20T21:12:32.003 に答える
9

これが、入力フィールドの両方の回答に基づく24時間バージョンです。

Javascript

jQuery(function() {
    jQuery('#slider-time').slider({
        range: true,
        min: 0,
        max: 1440,
        step: 15,
        values: [ 600, 1200 ],
        slide: function( event, ui ) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);

            if(hours1.length < 10) hours1= '0' + hours;
            if(minutes1.length < 10) minutes1 = '0' + minutes;

            if(minutes1 == 0) minutes1 = '00';

            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);

            if(hours2.length < 10) hours2= '0' + hours;
            if(minutes2.length < 10) minutes2 = '0' + minutes;

            if(minutes2 == 0) minutes2 = '00';

            jQuery('#amount-time').val(hours1+':'+minutes1+' - '+hours2+':'+minutes2 );
        }
    });
});

HTML

<label for="amount-time">Time</label>
<input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/>
<div id="slider-time"></div><br>
于 2013-08-04T01:56:54.893 に答える
0

これは、hours2 <10およびminutes2<10であり、hours2.length<10およびminutes2.length<10ではありません。これは文字列の長さではなく数値の評価です。

于 2015-03-02T08:08:17.740 に答える