from datetime import date
from typing import Tuple
from dash import Dash, Input, Output, _dash_renderer, callback, html
import dash_mantine_components as dmc
_dash_renderer._set_react_version("18.2.0")
app = Dash(__name__, external_stylesheets=dmc.styles.ALL)
app.layout = dmc.MantineProvider(
[
html.H1(children="My beautiful app", style={"textAlign": "center"}),
dmc.Container([
dmc.Stack(
[
dmc.MonthPickerInput(
id="month-range", type="range", debounce=True, clearable=True
),
dmc.Text(id="show-range"),
],
),
# demo of issue #463. This should be full width
dmc.Group(dmc.MonthPickerInput(style={"flexGrow":1}))
]),
]
)
@callback(
Output("show-range", "children"),
Input("month-range", "value"),
prevent_initial_call=True,
)
def month_range_changed(month_range: Tuple[date, date]):
if month_range is not None:
return f"Between {month_range[0]} and {month_range[1]}"
if __name__ == "__main__":
app.run(debug=True)