使用libLink的noUiSlider自定义格式化时间 [英] noUiSlider custom formatting time with libLink
问题描述
自定义格式加上noUiSlider中的时间值的libLink对我不起作用.
Custom formatting plus libLink of a time value in noUiSlider does not work for me as expected.
我想使用滑块以24小时格式(例如17:32)输出时间.
I want to use the slider to output a time in 24 hours format (like 17:32).
我还想输入一个有效时间,并通过libLink更新滑块.
I also want to enter a valid time and have the slider updated via libLink.
当我移动滑块时,输入中的时间会正确更新.但这不是相反的方法:在输入中输入新的时间,然后再进行散焦,将输入重置为先前的值.
When I move the slider, the time in the input is correctly updated. But it does not work the other way around: entering a new time in the input and then unfocusing resets the input to the previous value.
如果取消注释console.log函数HHMMtoMinutes(),则可以看到它触发了两次.这是怎么回事?
If you uncomment the console.log in function HHMMtoMinutes() you can see it firing twice. What is happening here?
$(document).ready(function() {
$(".slider").noUiSlider({
start: ["07:30"],
range: {
'min': 0,
'max': 24 * 60
},
format: {
to: minutesToHHMM,
from: HHMMtoMinutes
}
});
$(".slider").Link("lower").to($("#time"));
});
function minutesToHHMM(value) {
value = Math.round(value);
var hour = Math.floor(value / 60);
var min = value - hour * 60;
//console.log("value:" + value + "\thour: " + hour + "\tmin: " + min)
return ("0" + hour).slice(-2) + ":" + ("0" + min).slice(-2);
}
function HHMMtoMinutes(value) {
var split = value.toString().split(":");
var hour = parseInt(split[0]) * 60;
var min = parseInt(split[1]);
//console.log("value: " + value + "\thour: " + hour + "\tmin " + min);
return hour + min;
}
<link href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<div style="width:80%; margin:80px 0 0 100px">
<div class="slider"></div>
<form style="margin-top:20px">
<label for="time">time</label>
<input type="text" id="time" name="time" />
</form>
</div>
这里也是JSFiddle: https://jsfiddle.net/g42e6saf/2/
Here is also a JSFiddle: https://jsfiddle.net/g42e6saf/2/
推荐答案
It runs twice because libLink
needs to use the slider .val()
method to update. Setting the formatting on the link solves your issue.
$(".slider").noUiSlider({
start: [ 0 ],
range: {
'min': 0,
'max': 24 * 60
}
});
$(".slider").Link("lower").to($("#time"), null, {
to: minutesToHHMM,
from: HHMMtoMinutes
});
这篇关于使用libLink的noUiSlider自定义格式化时间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!