DateRangeSlider 얻을 사용자가 선택한 값

Question

그것은 내가이 DateRangeSlider (JQRangeSlider)와 함께 작업 한 첫 번째 시간과 시간 슬라이더로 사용 : JSFiddle

것은 내가 표시된 값이 얻을 필요가있다 예를 들어, 사용자가 간격을 선택하면 07:30부터 14:53까지 두 개의 값을 '.HH.mm' 형식으로 가져오고 싶습니다. 그런 다음 07:39이 09:32가되면 사용자가 마우스 클릭을 놓을 때마다이 값을 가져야합니다. 내가 사용하려고했습니다

:

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

그러나 T1이 (바이올린 코드에서 min2의 값) 최소의 경계에서 값을 가져옵니다. 마우스를 놓을 때마다 사용자가 선택한 값을 얻을 수있는 방법이 있습니까?

Answer 1

에 최소 최대 값을 얻을 것이다.

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

Answer 2

당신은 valueschanged 이벤트를 처리해야합니다.

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

를하거나 직접 valuesChanged 이벤트를 사용할 수 있습니다 및 valueschanged 이벤트 처리기에서 당신은 당신이 필요로하는 값을 얻을 수있는 문서 valuesMethod에 따르면 모든 마우스 출시

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

Answer 3

하면이 코드

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