noUiSlider使用libLink自定义格式化时间

自定义格式加上noUiSlider中时间值的libLink对我不起作用。

我想使用滑块以24小时格式输出时间（如17:32）。

我还想输入一个有效时间并通过libLink更新滑块。

移动滑块时，输入中的时间会正确更新。 但它反过来不起作用：在输入中输入新时间然后取消聚焦会将输入重置为先前的值。

如果在函数HHMMtoMinutes（）中取消注释console.log，则可以看到它触发两次。 这里发生了什么？

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

    
 
 
 time  
  

这里也是一个JSFiddle： https ：//jsfiddle.net/g42e6saf/2/

Answer 1

它运行两次因为libLink 需要使用滑块.val()方法来更新。 在链接上设置格式可以解决您的问题。

 $(".slider").noUiSlider({ start: [ 0 ], range: { 'min': 0, 'max': 24 * 60 } }); $(".slider").Link("lower").to($("#time"), null, { to: minutesToHHMM, from: HHMMtoMinutes }); 

更新小提琴 。

Answer 2

我查看了文档，它似乎有同样的问题，所以也许这是一个错误？ （我只是再看一遍它现在正在工作）无论如何这里是一个不使用libLink脚本的解决方法https://jsfiddle.net/q4s4xrL7/2/

 $(document).ready(function () { var $time = $('#time'), $slider = $('.slider'); $slider.noUiSlider({ start: ["07:30"], range: { 'min': 0, 'max': 24 * 60 - 1 // and I've subtracted 1 to make the range stop at 23:29 }, format: { to: minutesToHHMM, from: HHMMtoMinutes } }).on({ slide: updateInputValue }); 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], 10) * 60; var min = parseInt(split[1], 10); //console.log("value: " + value + "\thour: " + hour + "\tmin " + min); return hour + min; } $time.change(function () { $slider.val($time.val()); }); function updateInputValue() { $time.val($slider.val()); } // run when page first loads updateInputValue(); });