Adding a DatetimePicker widget

[hoxbro]

As mentioned in #1975 I have been working on a DatetimePicker. This is based on the existing DatePicker already in Panel and Bokeh, so a lot of the code is reused from it.

I could not get the value to be datetime in the Bokeh model, so I went with a simple string to communicate with the model. I also tried to inherit a lot of the code from the existing DatePicker but in the end it was easier to not do it.

The following code can be used to start the widget.

from datetime import datetime, date

import panel as pn
pn.extension()


a = pn.widgets.DatetimePicker(
    name="Datetime2",
    start=date(2019, 2, 1),
    end=date(2022, 1, 1),
    value=datetime.today(),
    enable_time=True,
    enable_seconds=True,
    military_time=True,
).servable()

Example of the widget in action:
https://user-images.githubusercontent.com/19758978/111658738-e8b39380-880c-11eb-801c-fe24b14dab00.mp4

TODO

• Adding documentation
• Adding unit test
• Properly some refactoring of the code
• Other things?

[philippjfr]

This is awesome, thank you! Is there an easy way to refactor this in such a way that we can add a DatetimeRange widget without duplicating too much code?

[jbednar]

Right; very often what I need to do is to choose a datetime range for which data to plot, so in practice I'm more often in need of a range than of a single datetime.

[hoxbro]

This is definitely possible. I have a small example with it. Although it is not finished yet as I have not implemented it on the python/panel side, but it works in the browser/bokeh model. It should be pretty straight forward to implement it on the panel side, but this will be another day.

I have attached a video showcasing it, where the console logs a change in the widget.

datetimepicker_range.mp4

[TvieiraB]

This looks great, can't wait to see it in Lumen.

[codecov]

Codecov Report

Merging #2107 (905f8dd) into master (238199f) will increase coverage by 0.07%.
The diff coverage is 99.16%.

@@            Coverage Diff             @@
##           master    #2107      +/-   ##
==========================================
+ Coverage   84.42%   84.50%   +0.07%     
==========================================
  Files         179      182       +3     
  Lines       20776    21272     +496     
==========================================
+ Hits        17541    17975     +434     
- Misses       3235     3297      +62     

Impacted Files	Coverage Δ
panel/widgets/__init__.py	100.00% <ø> (ø)
panel/widgets/input.py	95.83% <98.50%> (+0.56%)	⬆️
panel/models/__init__.py	100.00% <100.00%> (ø)
panel/models/datetime_picker.py	100.00% <100.00%> (ø)
panel/tests/widgets/test_input.py	100.00% <100.00%> (ø)
panel/layout/card.py	92.59% <0.00%> (-3.25%)	⬇️
panel/pane/base.py	88.78% <0.00%> (-2.77%)	⬇️
panel/io/reload.py	64.36% <0.00%> (-2.30%)	⬇️
panel/links.py	87.08% <0.00%> (-0.50%)	⬇️
panel/pane/idom.py	46.28% <0.00%> (-0.39%)	⬇️
... and 11 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 238199f...905f8dd. Read the comment docs.

[philippjfr]

This is great, thank you @hoxbro. Will merge and do any cleanup tasks in another PR if I find anything.