How to format DateRangeSlider labels?

I am trying to format the labels on a DateRangeSlider such that they display %m/%Y (example: 01/2021) instead of %d %b %Y (example: 01 Jan 2021). I just don’t get how this works. I have tried to pass the Bokeh DataRangeSlider ‘format’ attribute:

import pandas as pd
import panel as pn
from bokeh.models.formatters import DatetimeTickFormatter
pn.extension()

date_range_slider1 = pn.widgets.DateRangeSlider(
    name='Date Range Slider',
    start=dt.datetime(2021, 1, 1), end=dt.datetime(2021, 12, 31),
    value=(dt.datetime(2021, 5, 1), dt.datetime(2021, 9, 1)))

date_range_slider2 = pn.widgets.DateRangeSlider(
    name='Date Range Slider',
    start=dt.datetime(2021, 1, 1), end=dt.datetime(2021, 12, 31),
    value=(dt.datetime(2021, 5, 1), dt.datetime(2021, 9, 1)),
    format='%m/%Y')  
 
date_range_slider3 = pn.widgets.DateRangeSlider(
    name='Date Range Slider',
    start=dt.datetime(2021, 1, 1), end=dt.datetime(2021, 12, 31),
    value=(dt.datetime(2021, 5, 1), dt.datetime(2021, 9, 1)),
    format=DatetimeTickFormatter(months=['%m/%Y'], years = ['%m/%Y']))  
    
pn.Column(date_range_slider1, date_range_slider2, date_range_slider3)

image

But this does not produce the desired result. It displays the following warnings, so obviously this is not the right way of doing it:

WARNING:param.Date Range Slider: Setting non-parameter attribute format=%m/%Y using a mechanism intended only for parameters
WARNING:param.Date Range Slider: Setting non-parameter attribute format=DatetimeTickFormatter(id=‘11415’, …) using a mechanism intended only for parameters

I appreciate any help and advice to make this work.

The problem is that format is not defined in pn.widgets.DateRangeSlider. This should works

import panel as pn
import param
from datetime import datetime

pn.extension()


class FormatDateRangeSlider(pn.widgets.DateRangeSlider):
    format = param.String(r"%m%Y")

    def _process_property_change(self, msg):
        msg = super()._process_property_change(msg)
        if "value" in msg:
            v1, v2 = msg["value"]
            v1 = datetime.strptime(v1.strftime(self.format), self.format)
            v2 = datetime.strptime(v2.strftime(self.format), self.format)
            msg["value"] = (v1, v2)

        if "value_throttled" in msg:
            v1, v2 = msg["value_throttled"]
            v1 = datetime.strptime(v1.strftime(self.format), self.format)
            v2 = datetime.strptime(v2.strftime(self.format), self.format)
            msg["value_throttled"] = (v1, v2)

        return msg


date_range_slider = FormatDateRangeSlider(
    name="Date Range Slider",
    start=datetime(2021, 1, 1),
    end=datetime(2021, 12, 31),
    value=(datetime(2021, 5, 1), datetime(2021, 9, 1)),
    format="%m/%Y",
)

date_range_slider

image

3 Likes

I’ve added a feature request here Add format parameter · Issue #2894

1 Like

Thank you very much, Hoxbro. This works perfectly.

1 Like

Thanks for adding this feature request.

1 Like

No problem! If you want to and have the time, you could try to make the PR to implement this feature request!

I have added the format parameter to DateSlider and DateRangeSlider and made PR https://github.com/holoviz/panel/pull/2917.

2 Likes