[BUG] The localization is not applied when rendering the component for the first time.

[zaphire12]

Hello

My code

import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import Dash, html, dcc, Input, Output, State, no_update, clientside_callback, ClientsideFunction, callback_context

app = Dash(update_title=None)

app.layout = html.Div(
    children=[
        html.Div(
            className='containerDate',
            children=[
                dmc.DateRangePicker(
                    id="date-range-picker",
                    # label="Дата",
                    # description="You can also provide a description",
                    locale="ru",
                    persistence=True,
                    persistence_type='local'

                ),
                dmc.Space(h=10),
                dmc.Text(id="selected-date-date-range-picker"),
            ]
        )
    ]
)

if __name__ == '__main__':
    app.run(debug=True)

dash==2.12.1 Flask==2.2.5 dash-mantine-components==0.12.1

Problem with localization in case "persistence=True'". When opening the dmc.DateRangePicker the user sees locale="ru"(all values are in Russian). But with the subsequent update, the language becomes eng

GIF

[snehilvj]

I'm aware of this issue, but haven't been able to solve it yet.

[mauroalejandrojm]

Greetings, I suggest for now to use v0.13.0a3 with mantine v6 you can do something like this:

import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import Dash, html, dcc, Input, Output, State, no_update, clientside_callback, ClientsideFunction, callback_context

language_scripts = [
        "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/ru.min.js",
    ]

app = Dash(update_title=None, external_scripts=language_scripts)

app.layout = html.Div(
    children=[
        html.Div(
            className='containerDate',
            children=[
                dmc.DatesProvider(
                            children=[
                                dmc.DatePickerInput(
                                    id="date-range-picker",
                                    minDate=search.date_range(database).get(
                                        "from_date"
                                    ),
                                    value=[],
                                    type="range",
                                    persistence=True,
                                    persistence_type='local',
                                    style=style_date_picker,
                                    clearable=True,
                                    closeOnChange=False,
                                    styles=date_picker_input_style,

                                ),
                            ],
                            settings={
                                "locale": "ru",
                                "firstDayOfWeek": 1,
                                "weekendDays": [0, 6],
                            },
                        ),
                dmc.Space(h=10),
                dmc.Text(id="selected-date-date-range-picker"),
            ]
        )
    ]
)

if __name__ == '__main__':
    app.run(debug=True)

[brunotomaz-dev-stm]

Localization not working in mantine version 14, but works in version 12

v12

in my component:

dmc.DatePicker(
                                        id="date-picker",
                                        label="Data",
                                        placeholder="Selecione uma data",
                                        inputFormat="dddd - D MMM, YYYY",
                                        firstDayOfWeek="sunday",
                                        clearable=True,
                                        locale="pt-br"
                                        variant="filled",
                                        icon=DashIconify(icon="uiw:date"),
                                    ),

in app:

SCRIPTS = [
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/pt-br.min.js",
]

app = dash.Dash(
    __name__,
    external_scripts=SCRIPTS,
)

v14

in my component:

dmc.DatesProvider(
                                    id="dates-provider",
                                    children=dmc.DatePicker(
                                        id="date-picker",
                                        label="Data",
                                        placeholder="Selecione uma data",
                                        valueFormat="dddd - D MMM, YYYY",
                                        firstDayOfWeek=0,
                                        clearable=True,
                                        variant="filled",
                                        leftSection=DashIconify(icon="uiw:date"),
                                    ),
                                    settings={"locale": "pt-br"},
                                ),

in app:

SCRIPTS = [
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/pt-br.min.js",
]
dash._dash_renderer._set_react_version("18.2.0")

app = dash.Dash(
    __name__,
    external_scripts=SCRIPTS,
)

Could it be a problem due to the use of v18 of react?