Dash Mantine DatePicker - Update Year/Month with Callback

Dash Python
,
1

Hello,

I’m trying to create a calendar app using dmc.DatePicker components. I would like to be able to update displayed years / months with a select component. Initially my thought was to update the defaultDate property when the user changes the value of the year select component, but this doesn’t have any impact.

Here’s a simplified layout:

def calendar():

    content = dmc.Box(
        [
            dmc.Group(
                [
                    dmc.Select(
                        id=ComponentIds.Calendar.YEAR_SELECT,
                        data=[str(y) for y in FactoryCalendar.get_distinct_years()],
                        value=str(dt.datetime.today().year),
                        label='Year'
                    ),
                ]
            ),            
        ] + [
            dmc.Group(
                [
                    dmc.Text(id=t),
                    dmc.DatePicker(
                        id=q,
                        numberOfColumns=3,
                        defaultDate=d,
                        hideOutsideDates=False,
                        
                    )
                ]
            )
            for t, q, d in zip(
                ComponentIds.Calendar.TITLES, 
                ComponentIds.Calendar.QUARTERS, 
                [dt.date(dt.datetime.today().year, i, 1) for i in [1, 4, 7, 10]]
            )
        ]
    )

    callbacks()
    return content

And here’s the callbacks definition:

def callbacks():

    @dash.callback(
        output=[
            Output(i, 'defaultDate') for i in ComponentIds.Calendar.QUARTERS
        ],
        inputs={
            'year': Input(ComponentIds.Calendar.YEAR_SELECT, 'value')
        }
    )
    def update_default_dates(year):
        return [dt.datetime(int(year), i, 1).strftime('%Y-%m-%d') for i in [1, 4, 7, 10]]

The initial defaultDate passed when the components are created works as expected. But when defaultDate is updated in the callback, nothing happens. I suspect this is because the component has already been rendered, and changing defaultDate doesn’t trigger the component to update. So, the question is, is there a way to achieve the expected behavior where the components update with the correct year and month? I’ve tried updating value and minDate but also no luck.

Any ideas or help is very much appreciated!

Thanks!

2

The defaultDate is only used to set the initial date. You could try returning the entire DatePicker in a callback rather than just updating the defaultDate prop.

Also, you might be able to simplify the logic by using pattern matching callbacks
Pattern-Matching Callbacks | Dash for Python Documentation | Plotly