question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] DateRangeSlider is broken

See original GitHub issue

ALL software version info (bokeh, python, notebook, OS, browser, any other relevant packages)

Bokeh 2.0.0dev6 (ff2d2f62)

Description of expected behavior and the observed behavior

If start is set to today, the slider is not displayed at all. The JS exception:

Error rendering Bokeh items: TypeError: Cannot read property '0' of null
    at nouislider.js:298
    at Array.sort (<anonymous>)
    at new Spectrum (nouislider.js:298)
    at Object.testRange [as t] (nouislider.js:392)
    at nouislider.js:711
    at Array.forEach (<anonymous>)
    at testOptions (nouislider.js:703)
    at Object.initialize [as create] (nouislider.js:1770)
    at DateRangeSliderView.render (abstract_slider.js:105)
    at DateRangeSliderView.build (layout_dom.js:119)

It’s caused by the start value being null on the JS side. The relevant attributes value in the PULL-DOC-REPLY message:

{end: 1583107200000, value: ["2020-02-21", "2020-03-02"]}

If start is set to any other day, the slider is displayed, but incorrectly - it doesn’t depict the actual range. There’s only one handle at the very start. Any attempt to move it leads to the displayed value set to

function () { return request.convert(arguments); } .. function () { return request.convert(arguments); }

and the exception:

ValueError: expected an element of Tuple(Datetime, Datetime), got (None, None)

It’s caused by an incorrect update to the value field. One of the corresponding WS messages:

{"events":[{"kind":"ModelChanged","model":{"id":"1041"},"attr":"value","new":[null,null]}],"references":[]}

Complete, minimal, self-contained example code that reproduces the issue

from datetime import date, timedelta

from bokeh.io import curdoc
from bokeh.models import DateRangeSlider

start = date.today() - timedelta(days=1)
end = start + timedelta(days=10)
beginning = DateRangeSlider(value=(start, end), start=start, end=end)

curdoc().add_root(beginning)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:25 (25 by maintainers)

github_iconTop GitHub Comments

1reaction
bryevdvcommented, Feb 21, 2020

Sure, FYI we try to be tz-naive i.e. treat all datetime values as local and leave it to users to convert as necessary for what they want to show. The issue with the old date picker was that we could not prevent a conversion that it did internally which really mucked with that assumption.

0reactions
bryevdvcommented, Feb 22, 2020

Yup, I fixed that in the PR but didn’t go back and fix it up here

Read more comments on GitHub >

github_iconTop Results From Across the Web

Javascript date range slider is working in chrome but not in ...
I have a javascript date range slider code which is working fine in Chrome browser but not working in other browser. This is...
Read more >
Date Range Slider is not Working - plotly.js
Hi All, I want to be able to get range slider and a selector in my graph, I have followed the example in...
Read more >
Daterangeslider not working - Panel - HoloViz Discourse
I am from Pakistan panel widgets.DateRangeSlider not working . Following is the code snap Nauman Ahmad Khan @khannaum 16:30 date range values not...
Read more >
pyviz/pyviz - Gitter
Anyone who knows what can cause a Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is ... help required why daterangeslider...
Read more >
Date Range Slider in Blazor Range Slider Component
The date formatting can be achieved using TicksRendering and TooltipChange events. The process of date formatting is explained in the below sample. @using ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found