Question

这是我第一次使用DateRangeSlider（JQRangeSlider）并将其用作时间滑块：JSFiddle

问题是我需要获取用户选择的显示值，例如：如果用户选择间隔：07：39到14:53，我希望以格式获取这两个值'.HH.mm'即可。之后，如果07:39变为09:32，则每次用户释放鼠标时都会得到此值。

我尝试过使用：

var test = $("#slider").dateRangeSlider("values");
var t1 = test.min;

但是t1从边界获得最小值（来自小提琴代码的min2的值）。有没有办法在每次鼠标释放时获取用户选择的值？

Answer 1

你必须处理valueschanged事件。并且在valueschanged事件处理程序中，您将在每次鼠标释放时获得最小值

$("#slider").bind("valuesChanged", function(e, data){
   var test = $("#slider").dateRangeSlider("values");
   var t1 = test.min;
})

Answer 2

根据文档valuesMethod获取您需要的值：

$('#slider').on('valuesChanged', function(e, data) {
    var min = ('00' + data.values.min.getHours()).slice(-2) + ':' + ('00' + data.values.min.getMinutes()).slice(-2);
    var max = ('00' + data.values.max.getHours()).slice(-2) + ':' + ('00' + data.values.max.getMinutes()).slice(-2);
    alert('Min: ' + min + '  Max: ' + max);
  });

  $('#btn').on('click', function(e) {
    var values =     $("#slider").dateRangeSlider('values');

    var min = ('00' + values.min.getHours()).slice(-2) + ':' + ('00' + values.min.getMinutes()).slice(-2);
    var max = ('00' + values.max.getHours()).slice(-2) + ':' + ('00' + values.max.getMinutes()).slice(-2);
    alert('Min: ' + min + '  Max: ' + max);
  })

或者您可以直接使用valuesChanged事件。

{{1}}

Updated fiddle

Answer 3

试试这段代码

＆＃13;

$("#slider").bind("valuesChanged", function(e, data){      
console.log(data.values.min.getHours()+":"+data.values.min.getMinutes()); 
  console.log(data.values.max.getHours()+":"+data.values.max.getMinutes());
});

＆＃13;

DateRangeSlider获取用户选择的值

3 个答案: