考虑到这一点 http://jsfiddle.net/2a0hsj4z/4/,此处为摘录:
moment.locale("en");
var start = moment("2010-10", "YYYY-MM");
var end = moment("2017-10", "YYYY-MM");
$("#chord_range").ionRangeSlider({
type: "double",
grid: true,
min: start.format("x"),
max: end.format("x"),
from: start.format("x"),
to: end.format("x"),
prettify: function (num) {
return moment(num, 'x').format("MMMM YYYY");
}
});
var slider = $("#chord_range").data("ionRangeSlider");
$(".irs-slider").click(function() {
console.log(slider.result.from);
})

<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/skin2.css" rel="stylesheet"/>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet"/>
<input id="chord_range" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
&#13;
当我尝试拖动左/右滑块(开始/结束值)时,为什么会出现Invalid Date error
?启动时,日期显示正确。当您触摸滑块时,它会断开。
当我将var start = moment("2010-10", "YYYY-MM");
替换为var start = moment("2012-10", "YYYY-MM");
时,它可以正常运行:
moment.locale("en");
var start = moment("2012-10", "YYYY-MM");
var end = moment("2017-10", "YYYY-MM");
$("#chord_range").ionRangeSlider({
type: "double",
grid: true,
min: start.format("x"),
max: end.format("x"),
from: start.format("x"),
to: end.format("x"),
prettify: function (num) {
return moment(num, 'x').format("MMMM YYYY");
}
});
var slider = $("#chord_range").data("ionRangeSlider");
$(".irs-slider").click(function() {
console.log(slider.result.from);
})
&#13;
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/skin2.css" rel="stylesheet"/>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet"/>
<input id="chord_range" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
&#13;
为什么?
答案 0 :(得分:2)
您错过了步骤选项,步骤将为1,1(对于(option.max - option.min)来说太小而且会导致离子rangeSlider出错。所以你应该设置一个大数字步骤选项。
$("#chord_range").ionRangeSlider({
type: "double",
grid: true,
min: start.format("x"),
max: end.format("x"),
from: start.format("x"),
to: end.format("x"),
step: 100000,
prettify: function (num) {
return moment(num, 'x').format("MMMM YYYY");
}
});