Stophface Stophface - 1 month ago 11
Javascript Question

Invalid Date with moment js

Considering this
http://jsfiddle.net/2a0hsj4z/4/, here as a snippet:



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>





Why do I get an
Invalid Date error
when I try to drag the left/right slider (start/end value)? On startup the date shows correctly. When you touch the slider, it breaks.
When I replace
var start = moment("2010-10", "YYYY-MM");
with
var start = moment("2012-10", "YYYY-MM");
it works:



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);
})

<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>





Why is that?

Answer

you miss the step option and step will be 1, 1 is too small for (option.max - option.min) and will cause error in ion rangeSlider.So you should set a large number for step option.

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