[New Feature] Dash Mantine Compontents DatePicker Presets

Dash Python
1

New in the docs!

This feature has been available since dash-mantine-components==2.1.0, but was just added to the documentation thanks to first time contributor @EstanVW25 :rocket:

DatePicker presets

DatePicker, DatePickerInput and DateTimePicker now support presets prop that allows you to add custom date presets. Presets are displayed next to the calendar:

presets


from datetime import date, timedelta
from dateutil.relativedelta import relativedelta

from dash import Dash
import dash_mantine_components as dmc

today = date.today()

component = dmc.DatePicker(
    id="datepicker-presets",
    type="range",
    presets=[
        {
            "value": [
                (today - timedelta(days=2)).isoformat(),
                today.isoformat(),
            ],
            "label": "Last two days",
        },
        {
            "value": [
                (today - timedelta(days=7)).isoformat(),
                today.isoformat(),
            ],
            "label": "Last 7 days",
        },
        {
            "value": [
                today.replace(day=1).isoformat(),
                today.isoformat(),
            ],
            "label": "This month",
        },
        {
            "value": [
                (today - relativedelta(months=1)).replace(day=1).isoformat(),
                (today.replace(day=1) - timedelta(days=1)).isoformat(),
            ],
            "label": "Last month",
        },
        {
            "value": [
                date(today.year - 1, 1, 1).isoformat(),
                date(today.year - 1, 12, 31).isoformat(),
            ],
            "label": "Last year",
        },
    ],
)


app = Dash()

app.layout = dmc.MantineProvider([
    component,
])


if __name__ == "__main__":
    app.run(debug=True)
6 Likes
2

Todays todo: - add presets to my dmc.DatePickerInput , such a nice ui ux design / quality of life improvement to that component. Great addition and thanks for the documentation! @estanvw25

1 Like
3

Hi,

Very nice feature, thanks for this !

Is it also available for dateTIME pickers ?

Thanks

Lucas

4

Hi @Lucas_P

Yes, it works with the DateTimePicker as well. You can change the presets so it includes certain times. You can also format the TimePicker by passing props down to the underlying TimePicker component with timePickerProps prop.

Note about using datetime

Python’s datetime functions run on the server, not the client. Examples like this work locally but can behave unexpectedly when deployed, because datetime.now() is evaluated when the server starts and does not update until the app restarts. In deployed apps, presets that depend on the current time should be generated in a callback instead.

image
image806×806 45.3 KB

1 Like