An alternative datetime widget using HTML datetime-local

Panel
1

I’d like to use the HTML input of type datetime-local (<input type="datetime-local">) instead of the default panel DatetimePicker widget, because I find the former easier to use with a keyboard.

Here’s my attempt so far:

import param
from panel.reactive import ReactiveHTML

pn.extension()


class MyDatetimeStr(ReactiveHTML):
    value = param.String(default="2023-01-01 12:00:00")

    _template = (
        '<input id="datetime_el" type="datetime-local" step="1" value="${value}" />'
    )
    _child_config = {"value": "template"}
    _dom_events = {"datetime_el": ["change"]}

    def _datetime_el_change(self, event):
        new_value_str = event.data["target"]["value"]
        self.value = new_value_str

w = MyDatetimeStr()

I works reasonably well: setting w.value updates the view, and vice versa. It’s however a bit hackish: the value is defined as a param.String instead of a proper param.Date.

How to use a param.Date instead? I’ve tried but got stuck because value is rendered as a timestamp in millisecond, whereas <input>’ value expect a string in ISO format.

Thanks in advance