(Calendar + clock) widget

[jbednar]

It's not currently easy for a user to select a datetime value in Panel. Current options:

• Datepicker and Dateslider: convenient for selecting a date, but can't select a time
• Datetimeinput: returns a datetime, but not very friendly to the user; requires them to type a string without much feedback on what's accepted
• Datetimeslider: If DatetimeSlider and other missing widgets #1972 is implemented, would make it easy to scroll through datetimes, and if [FEATURE] Better numeric input widget bokeh/bokeh#9943 is implemented would even make it feasible for a user to input a very specific datetime when needed, but would still not be that friendly for users who are thinking in terms of calendars and clocks

I think it would be valuable to have a datetime widget that is a drop-in replacement for the Datetimeinput widget, returning a single datetime64 value, but with user-friendly controls for people thinking of a specific time on a specific date: a calendar to select the date, and hh:mm:ss text boxes to select the time. Obviously we can build such functionality already out of Bokeh widgets, but then you get date, hour, minute, and seconds values separately rather than a single datetime value useful for feeding to something like Pandas. Needing to select a datetime seems like a common and typical use case, and so I think there ought to be a straightforward drop-in widget like this to handle it.

[hoxbro]

I have been playing around with the existing Datepicker in panel, the bokeh model and flatpickr. flatpickr has a option to enable time, and I got a working code of it in action (maybe with some small hacks...)

datetimepicker.mp4

[nghenzi]

this is awesome !!!

I was using a JS library, but it would be nice if something like this is incorporated to panel

you can check the JS library here

https://discourse.holoviz.org/t/elegant-date-and-time-picker/1262/3?u=nghenzi2019

[MarcSkovMadsen]

Awesome both you @hoxbro and the work

[nghenzi]

flatpickr support a range date selection too.

[jbednar]

Both of those look fabulously useful!

[philippjfr]

I have been playing around with the existing Datepicker in panel, the bokeh model and flatpickr. flatpickr has a option to enable time, and I got a working code of it in action (maybe with some small hacks...)

Can you submit a PR? Would love to do this.

[philippjfr]

To be clear, in the long run we should upstream the widgets to bokeh but I'd love to get these into Panel asap.

[rsignell-usgs]

We have the nice Panel DatetimePicker now, but unfortunately I just found out it doesn't like the datetime64 objects from xarray (and pandas, I guess).

Here's a short reproducible notebook showing the problem (screenshot below):

[rsignell-usgs]

@philippjfr please let me know if I should raise a new issue -- I would be happy to do so.

[hoxbro]

The main problem is that your data is discrete and that DatetimePicker can accept any datetime value.

A way to get this to work is to find the last value in the dataset and plot that. Here is an example of how it could be done.

import hvplot.xarray  # noqa
import pandas as pd
import panel as pn
import xarray as xr

xr_ds = xr.tutorial.open_dataset("air_temperature")
dt = pd.to_datetime(xr_ds.time)

datetime_widget = pn.widgets.DatetimePicker(
    value=dt.min(), start=dt.min(), end=dt.max()
)


def plot(t):
    t = dt[dt.get_indexer([t], method="ffill")[0]]  # Find the last valid value
    return xr_ds["air"].sel(time=t).hvplot(x="lon", y="lat")


pn.Column(pn.bind(plot, datetime_widget), datetime_widget)

screenrecord-2022-09-14_11.33.33.mp4

[maximlt]

I guess there could be a variation of a DatetimePicker that only allows to pick in a discrete list of date time values, everything else being greyed out. That'd be a feature request on Panel.

Edit: That would work best for the DatePicker, as greying out the clock is trickier.

[hoxbro]

I think you just described disabled_dates/enabled_dates of DatePicker.

[rsignell-usgs]

@hoxbro and @maximlt , thanks so much for providing the solution -- I never would have figured that out!
Would it be possible to select with xarray without going to pandas? Would be bit clearer since we are working with xarray data here.

[hoxbro]

It is actually easier.

def plot(t):
    return xr_ds["air"].sel(time=t, method="ffill").hvplot(x="lon", y="lat")

The pd.to_datetime can also be replaced as it is only used to find the max and min value and convert it to a datetime object. Though, I think this is the easiest way to do it. :)

Edit:
The function and bind can be replaced with this: xr_ds["air"].interactive.sel(time=datetime_widget, method="ffill").hvplot(x="lon", y="lat")

[rsignell-usgs]

Wow, this is getting easier and easier!

Notebook here: https://nbviewer.org/gist/rsignell-usgs/f860014203b9276ae67c654eaa7c9788

The only thing that didn't work quite as expected was that I was hoping that enabled_dates would only allow selections every 6 hours, since that's what this data is. But still awesome!

[philippjfr]

The DatetimePicker fulfills the brief of what is asked for in this issue and there are other issues about other date selection widgets, so I'll close.