How to format DateRangeSlider labels?

Panel
1

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.

1 Like
2

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
3

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

3 Likes
4

Thank you very much, Hoxbro. This works perfectly.

1 Like
5

Thanks for adding this feature request.

1 Like
6

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

7

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

2 Likes