Invalid start "NaN" - timeline vis.js

Question

I don't know why but when I try to call

this.$refs.timeline.on('rangechange', function (start, end, byUser, event) {
    console.log('timechanged...')
})

I'm getting this error every time Error: Invalid start "NaN".

I searched on google for the solution but i found nothing.

Here are the options for the timeline:

timeline: {
    stack: true,
    start: new Date(),
    end: new Date(1000 * 60 * 60 * 24 + (new Date()).valueOf()),
    min: new Date(2018, 0, 1),
    max: new Date(2019, 0, 1),
    zoomMin: 1000 * 27 * 24 * 24, // if you want to zoom more in then lower the 27
    zoomMax: 1000 * 60 * 60 * 24 * 31 * 3,
    orientation: 'top'
}

I have logged in the vis.js script what is happening. It's starting to logging start and end date and then it just throws error NaN.

And here is the vis.js script code where I'm getting the error.

  console.log('START', start)
  console.log('END', end)
  var newStart = start != null ? util.convert(start, 'Date').valueOf() : this.start,
      newEnd = end != null ? util.convert(end, 'Date').valueOf() : this.end,
      max = this.options.max != null ? util.convert(this.options.max, 'Date').valueOf() : null,
      min = this.options.min != null ? util.convert(this.options.min, 'Date').valueOf() : null,
      diff;
  // check for valid number
  if (isNaN(newStart) || newStart === null) {
    throw new Error('Invalid start "' + start + '"');
  }
  if (isNaN(newEnd) || newEnd === null) {
    throw new Error('Invalid end "' + end + '"');
  }

Does anyone know how to solve this problem? Thanks.

Answer 1

It's because new Date() creates an object, not a number and your function is expecting date to be a number. Hence NaN = Not a Number.

[Edit] Change your test logic to:

    console.log('START');
    console.dir(start);
    console.log('END');
    console.dir(end);
    var newStart = !isNaN(start) ? util.convert(start, 'Date').valueOf() 
                                 : this.start
       ,newEnd = !isNaN(end) ? util.convert(end, 'Date').valueOf() 
                                 : this.end
       ,max = this.options.max != null ? util.convert(this.options.max, 'Date').valueOf() : null
       ,min = this.options.min != null ? util.convert(this.options.min, 'Date').valueOf() : null
       ,diff;
    //check for valid number
    if ( isNaN(newStart) ) {
        throw new Error('Invalid start "' + start + '"');
    }
    if ( isNaN(newEnd) ) {
        throw new Error('Invalid end "' + end + '"');
    }