javascript - DateRangeSlider 获取用户选择的值

Question

这是我第一次使用 DateRangeSlider (JQRangeSlider) 并将其用作时间 slider :JSFiddle

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

我试过使用:

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

但是 t1 从边界获取最小值(来自 Fiddle 代码的 min2 的值)。有什么方法可以让用户在每次释放鼠标时选择值？

Answer 1

根据文档valuesMethod获取所需的值:

var dateValues = $("#slider").dateRangeSlider("values");

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

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

Updated fiddle