将时间范围滑块绑定到输入字段

时间:2016-06-16 14:34:45

标签: javascript

我已经完成了一堆教程,似乎无法找到答案。我正在尝试实现时间范围滑块以输入数据库。我已经开始使用示例

http://codepen.io/caseymhunt/pen/kertA

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 1440,
    step: 15,
    values: [540, 1020],
    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);
    }
});

我有两个输入字段ID StartTimeEntryEndTimeEntry。如何从滑块中获取值以更新这两个输入表单字段的值?

感谢。

1 个答案:

答案 0 :(得分:0)

我明白了。如果其他人试图做同样的事情,我通过以下方式得到它:

$('.slider-time').html(hours1 + ':' + minutes1);
$('#startTimeeEntry').val($('.slider-time').html(hours1 + ':' + minutes1).text());

其中

#startTimeEntry

是输入字段的id。