Start Date and End Date of Dash Mantine Components DateRangePicker

Dash Python
1

Currently I mainly use Dash Boostrap Components’s DateRangePicker when making Dash, but I find Dash Mantine’s month and year selection feature very good and plan to use it instead. But I don’t see the Start Date and End Date options like Dash Boostrap Components’s DateRangePicker to filter data. Something as below:

@callback([Output('sales_indicator', 'children'),
           Output('revenues_indicator', 'children'),
           Output('bottle_indicator', 'children'),
           Output('liters_indicator', 'children')],
          [Input('btn','n_clicks'),
           Input(ThemeChangerAIO.ids.radio("theme"), "value")],
          [State('my-date-picker-range', 'start_date'),
           State('my-date-picker-range', 'end_date')])
def update_indicator(n_clicks,theme,start_date,end_date):
    dff = df[(df['date'] >= start_date) & (df['date'] <= end_date)]

So with start_date and end_date I can filter data to create graph but with Dash Mantine I just see value option and I don’t know how to use it to filter data. Below is sample from Dash Mantine:

from datetime import datetime, timedelta, date

import dash_mantine_components as dmc
from dash import Input, Output, html, callback
from dash.exceptions import PreventUpdate

html.Div(
    [
        dmc.DateRangePicker(
            id="date-range-picker",
            label="Date Range",
            description="You can also provide a description",
            minDate=date(2020, 8, 5),
            maxDate=date(2022, 9, 19),
            value=[datetime.now().date(), datetime.now().date() + timedelta(days=5)],
            style={"width": 330},
        ),
        dmc.Space(h=10),
        dmc.Text(id="selected-date-date-range-picker"),
    ]
)


@callback(
    Output("selected-date-date-range-picker", "children"),
    Input("date-range-picker", "value"),
)
def update_output(dates):
    prefix = "You have selected: "
    if dates:
        return prefix + "   -   ".join(dates)
    else:
        raise PreventUpdate

So how can I filter data with Dash Mantine when I don’t have start_date and end_date?
Thank and best regard

2

Hello @hoatran,

When running your mantine version, it looks like the date[0] = start_date and date[1] = end_date.

You should be able to split these like this:

start_date, end_date = date

In your callback, it’d look like this:


@callback(
    Output("selected-date-date-range-picker", "children"),
    Input("date-range-picker", "value"),
)
def update_output(dates):
    prefix = "You have selected: "
    start_date, end_date = dates
    if dates:
        return prefix + "   -   ".join([start_date, end_date])
    else:
        raise PreventUpdate

That way, you can just update your coding via this, and be able to use your old code. :slight_smile:

2 Likes
3

Thank you, it worked for me.

1 Like
4

@jinnyzor: By the way, do you know how to switch theme on Dash Mantine Components? I don’t see it in documentation.
Same as this part.
Screenshot 2022-11-09 114047

5

Not 100%, but with taking a look here, there you can provide an id to the provider, which allows it to be used in callbacks.

Which means you can switch the theme.

@AnnMarieW, do you know?

1 Like