DatePicker widget incompatible with datetime plots - alternatives?

[sunh20]

Hi all, looking for suggestions for using a DatePicker for interacting with datetime plots.

My goal is to use two DatePicker widgets to define the start and end of my x_range via js_links. However, the interaction is not functional, where the widgets and plots appear, but changing the widget dates does not cause any plot changes. My guess is that the DatePicker values use Date objects, which might not be compatible with the plot’s datetime x range.

I’m wondering if there are any alternative solutions here?

I’m aware that things like RangeTool and DatetimeRangeSlider exist and I’ve gotten them to work, but in terms of my UI needs, a DatePicker would work best.

Code:

import numpy as np
from datetime import datetime

from bokeh.sampledata.stocks import AAPL
from bokeh.plotting import figure, show
from bokeh.layouts import column, row
from bokeh.models import DatePicker, ColumnDataSource

# make plot
dates = np.array(AAPL['date'], dtype=np.datetime64)
source = ColumnDataSource(data=dict(date=dates, close=AAPL['adj_close']))

p = figure(x_axis_type="datetime",x_range=(dates[0], dates[500]),y_range=[0,50])
p.line('date', 'close', source=source)

# define start, end dates
date_start = datetime(2000, 5, 1).date()
date_end = datetime(2002, 1, 1).date()

# make datepicker
date_picker_start = DatePicker(title='Start date', value=date_start, min_date=date_start, max_date=date_end)
date_picker_end = DatePicker(title='End date', value=date_end, min_date=date_start, max_date=date_end)

# link datepicker to plot
date_picker_start.js_link(attr='value', other=p.x_range, other_attr='start')
date_picker_end.js_link(attr='value', other=p.x_range, other_attr='end')

show(column(row(date_picker_start, date_picker_end),p))

[Bryan]

The DatePicker value is actually an ISO date string, e.g. "2022-09-07". Rather than js_link you could define a CustomJS callback to use with js_on_change that converts the date string value into a real JavaScript datetime object, and then into milliseconds-from-epoch (which is actually the underlying units of datetime values in Bokeh documents) before setting the range start and end.