Download this notebook from GitHub (right-click to download).

In [1]:
import datetime as dt
import panel as pn


The DatetimeRangeInput widget allows selecting a datetime range using two DatetimeInput widgets, which return a tuple range.

For more information about listening to widget events and laying out widgets refer to the widgets user guide. Alternatively you can learn how to build GUIs by declaring parameters independently of any specific widgets in the param user guide. To express interactivity entirely using Javascript without the need for a Python server take a look at the links user guide.


For layout and styling related parameters see the customization user guide.

  • format (str): Datetime formatting string that determines how the value is formatted and parsed (default='%Y-%m-%d %H:%M:%S')
  • start (datetime): The range's lower bound
  • end (datetime): The range's upper bound
  • value (tuple): Tuple of upper and lower bounds of the selected range expressed as datetime types
  • disabled (boolean): Whether the widget is editable
  • name (str): The title of the widget

The datetime parser uses the defined format to validate the input value, if the entered text is not a valid datetime a warning will be shown in the title as "(invalid)":

In [2]:
datetime_range_slider = pn.widgets.DatetimeRangeInput(
    name='Datetime Range Input',
    start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),


DatetimeRangeInput.value returns a tuple of datetime values that can be read out and set like other widgets:

In [3]:
(datetime.datetime(2017, 1, 1, 0, 0), datetime.datetime(2018, 1, 10, 0, 0))


The DatetimeRangeInput widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

In [4]:
pn.Row(datetime_range_slider.controls(jslink=True), datetime_range_slider)

Download this notebook from GitHub (right-click to download).