Need help on how to load Calendar widget from MaterialUI

[techwithhuz]

Hello,
I need some help on how to use Calendar component https://mui.com/x/react-date-pickers/date-picker/ form MaterialUI

Trying with below code

from fastapi import FastAPI
import uvicorn
from reactpy import component, html, run, web
from reactpy.backend.fastapi import configure

mui = web.module_from_template(
    "react",
    "@mui/x-date-pickers",
    "@mui/material",
    fallback="please wait loading..."

)


#Create calendar with material ui
DatePicker = web.export(mui,"DatePicker")

def Mycalender():
    return html.div(
        DatePicker ({
            "label":"Basic date picker",
        },"my calender"),
    )


app = FastAPI()
configure(app,Mycalender)

if __name__ == '__main__':
    uvicorn.run(app, port=8080, host='0.0.0.0')

Getting below error on browser
localhost/:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "@mui/material/@mui/x-date-pickers". Relative references must start with either "/", "./", or "../".

Also tried removing importing of "@mui/material"

mui = web.module_from_template(
    "react",
    "@mui/x-date-pickers",
    fallback="please wait loading..."

)

but still no luck and got below error

react-dom.production.min.js:189 Error: MUI: Can not find the date and time pickers localization context.
It looks like you forgot to wrap your component in LocalizationProvider.
This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package

[rmorshea]

Unfortunately I don't think ReactPy is able to support DatePicker via module_from_template - there are two reasons for this:

1. You need to wrap the date picker in a LocalizationProvider and ReactPy has limited support for nesting JS components
2. the LocalizationProvider requires a JS dateAdapter and all props to JS component must be JSON serializable. So even if we could allow the JS components to be nested this would be a blocker.

These are some of the reasons why we want to deprecate module_from_template - its uses are pretty limited.

[techwithhuz]

Thanks for the reply @rmorshea. So that means as of now there is now option to display calendar component using reactpy?

[rmorshea]

It is possible via the custom components API but that requires writing some Javascript.