Datetimepicker not working in 0.14.0

[kevindehecker]

After updating to 0.14 I'm getting an error:

  ...
    dmc.DatePicker(id={'type': f'{input_label}_input', 'index': column.name},
  File "/usr/local/lib/python3.8/site-packages/dash/development/base_component.py", line 425, in wrapper
    return func(*args, **kwargs)
  File "/usr/local/lib/python3.8/site-packages/dash_mantine_components/DatePicker.py", line 1279, in __init__
    super(DatePicker, self).__init__(**args)
  File "/usr/local/lib/python3.8/site-packages/dash/development/base_component.py", line 143, in __init__
    raise TypeError(
TypeError: The `dash_mantine_components.DatePicker` component (version 0.14.0) with the ID "{'type': 'activities_input', 'index': 'date'}" received an unexpected keyword argument: `inputFormat`
Allowed arguments: allowDeselect, allowSingleDateInRange, aria-*, ariaLabels, bg, bga, bgp, bgr, bgsz, bottom, c, className, classNames, clearButtonProps, clearable, closeOnChange, columnsToScroll, darkHidden, data-*, debounce, decadeLabelFormat, description, descriptionProps, disabled, disabledDates, display, dropdownType, error, errorProps, ff, firstDayOfWeek, flex, fs, fw, fz, h, hasNextLevel, hiddenFrom, hideOutsideDates, hideWeekdays, id, inputWrapperOrder, inset, label, labelProps, labelSeparator, left, leftSection, leftSectionPointerEvents, leftSectionProps, leftSectionWidth, level, lh, lightHidden, lts, m, mah, maw, maxDate, maxLevel, mb, me, mih, minDate, miw, ml, mod, modalProps, monthLabelFormat, monthsListFormat, mr, ms, mt, mx, my, n_submit, name, nextIcon, nextLabel, numberOfColumns, opacity, p, pb, pe, persisted_props, persistence, persistence_type, pl, placeholder, pointer, popoverProps, pos, pr, previousIcon, previousLabel, ps, pt, px, py, radius, readOnly, required, right, rightSection, rightSectionPointerEvents, rightSectionProps, rightSectionWidth, size, sortDates, style, styles, ta, tabIndex, td, top, tt, type, unstyled, value, valueFormat, variant, visibleFrom, w, weekdayFormat, weekendDays, withAsterisk, withCellSpacing, withErrorStyles, wrapperProps, yearLabelFormat, yearsListFormat

This is the code:

                dmc.DatePicker(id={'type': f'{input_label}_input', 'index': column.name},
                               clearable=False,
                               inputFormat='DD-MM-YYYY',
                               value=column.default.date() if column.default else date.today(),
                               amountOfMonths=1,
                               persistence=True,)
            )

If I remove inputFormat and amountOfMonths the error is gone, but weirdly enough the datetimepicker is not shown.

Quickly looked into the issues, changelog and latest commits of this project if I could find something, but not really. My apologies if I'm overlooking something but I was working on something else entirely. As a workaround I reverted to 0.12.1.

[BSd3v]

Hello @kevindehecker

I believe that there is a new component for this now, and DatePicker is not available for inputs.

Try converting to DateInput:

https://mantine.dev/dates/date-input/

[kevindehecker]

Tried that quickly, but basically getting the same problem...

[BSd3v]

Check here:

https://dmc-docs-0-14.onrender.com/components/dateinput#dateinput-props

[kevindehecker]

Yes, I tried that and to be clear I don't get the above error at that point. But the control is not drawn at all. So, before 0.14 my modal window looks like: then, after updating to 0.14 and changing to DateInput like you suggest (even copying the exact example for the DateInput):

Now, closer inspection in the error console in the browser gives me a new error though;

dash_mantine_compone…4_0m1713338318.js:2 Error: @mantine/core: MantineProvider was not found in component tree, make sure you have it in your app
    at t.useMantineTheme (dash_mantine_compone…338318.js:2:1553882)
    at t.useProps (dash_mantine_compone…338318.js:2:1571908)
    at t.useInputProps (dash_mantine_compone…338318.js:2:1329687)
    at dash_mantine_compone…338318.js:2:1607689
    at we ([email protected]_15_0….14.0.min.js:84:293)
    at nh ([email protected]_15_0…1.14.0.min.js:96:43)
    at zj ([email protected]_15_0…14.0.min.js:230:425)
    at Th ([email protected]_15_0…14.0.min.js:152:223)
    at tj ([email protected]_15_0…14.0.min.js:152:152)
    at Te ([email protected]_15_0…14.0.min.js:146:151)
console.error	@	dash_mantine_compone…4_0m1713338318.js:2

This seems to be a problem with the new datetinput as well as the original datetime (if I remove the now unsupported arguments), and only since 0.14.

[albavilanova]

You need to wrap your application to remove the error MantineProvider was not found in component tree, make sure you have it in your app. From the docs (https://www.dash-mantine-components.com/components/mantineprovider):

import dash_mantine_components as dmc

app.layout = dmc.MantineProvider(
    theme = {...},
    children={...}
)

[kevindehecker]

Ha, interesting. Thank you.

I got stuck immediately again on:

dash_mantine_compone…4_3m1715762761.js:2 TypeError: r.useId is not a function
    at t.useRandomClassName (dash_mantine_compone…762761.js:2:1544322)
    at dash_mantine_compone…762761.js:2:1536246
    at we ([email protected]_15_0….14.0.min.js:84:293)
    at nh ([email protected]_15_0…1.14.0.min.js:96:43)
    at zj ([email protected]_15_0…14.0.min.js:230:425)
    at Th ([email protected]_15_0…14.0.min.js:152:223)
    at tj ([email protected]_15_0…14.0.min.js:152:152)
    at Te ([email protected]_15_0…14.0.min.js:146:151)
    at [email protected]_15_0…1.14.0.min.js:61:68
    at unstable_runWithPriority ([email protected]_15_0m170….14.0.min.js:25:260)

However, sifting through the issues I found https://www.dash-mantine-components.com/migration and so set dash._dash_renderer._set_react_version('18.2.0'), which solved that. Unfortunately I got stuck again, because although the dateinput field itself is rendered correctly now, as soon as I click it to change the date it shows like this:

This weird gray-white box in the background supposedly is the date picker...

I tried playing with the theme, but nothing seems to change:

dmc.MantineProvider(
            theme=dmc.DEFAULT_THEME['colors'],
            children= {...}

FYI: the updated code for creating the dateinput:

            dbc.Label(column.name + ':'),
            html.Div(
                dmc.DateInput(id={'type': f'{input_label}_input', 'index': column.name},
                              clearable=False,
                              valueFormat='DD-MM-YYYY',
                              value=column.default.date() if column.default else date.today(),
                              persistence=True,)
            )
        ])

Since there is no error, it's kinda hard to figure out what's going wrong here.

[BSd3v]

Hello @kevindehecker,

Please follow the directions laid out here:

https://www.dash-mantine-components.com/getting-started

You need to wrap with MantineProvider and have the app run in React 18.