Binding Panel DatetimeRangePicker to plot

Question

I am attempting to modify a working Panel dashboard to change from the DatetimeRangeSlider widget to the DatetimeRangePicker widget.

I have a long time series but typically only the most recent 2 weeks want to be plotted.

The issue is that the working method described in the holoviz tutorial binds the date_slider.param.value_start and date_slider.param.value_end values to selection of the data for plotting. There is no equivalent parameter in the date_picker object. Using date_picker.value[0] and date_picker.value[1] will use these for the initial plot, but selecting new values does not update the selection in the plot. What is the correct way of binding the date picker widget to update the plot?

Working version of code and image of result showing issue below.

import numpy as np
import pandas as pd
import panel as pn
import hvplot.pandas

# create data
df = pd.DataFrame(
    {"data": np.random.randint(0, 100, 100), "data2": np.random.randint(0, 100, 100)},
    index=pd.date_range(start="2022", freq="D", periods=100),
)

# slider widget - updating
date_slider = pn.widgets.DatetimeRangeSlider(
    name="Date Range ",
    start=df.index.min(),
    end=df.index.max(),
    value=(df.index.max() - pd.Timedelta(14, "day"), df.index.max()),
)

# date picker widget - not updating
date_picker = pn.widgets.DatetimeRangePicker(
    name="Date Range",
    start=df.index.min(),
    value=(df.index.max() - pd.Timedelta(14, "day"), df.index.max()),
)

#plotting function
def ts_plot(df, start_val, end_val):

    df = df[(df.index > start_val) & (df.index <= end_val)]

    hv_plot = df.hvplot(
        x="index",
        y=["data", "data2"],
    )
    return hv_plot


# slider binding
slider_plot = pn.bind(
    ts_plot, df, date_slider.param.value_start, date_slider.param.value_end
)

#picker binding
picker_plot = pn.bind(ts_plot, df, date_picker.value[0], date_picker.value[1])

# panel layout
slider = pn.Column(date_slider, slider_plot)
picker = pn.Column(date_picker, picker_plot)

pn.Row(slider, picker).servable()