-
-
Notifications
You must be signed in to change notification settings - Fork 328
Need help on how to load Calendar widget from MaterialUI #1109
-
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
Beta Was this translation helpful? Give feedback.
All reactions
Unfortunately I don't think ReactPy is able to support DatePicker via module_from_template - there are two reasons for this:
- You need to wrap the date picker in a
LocalizationProviderand ReactPy has limited support for nesting JS components - the
LocalizationProviderrequires a JSdateAdapterand 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.
Replies: 1 comment 2 replies
-
Unfortunately I don't think ReactPy is able to support DatePicker via module_from_template - there are two reasons for this:
- You need to wrap the date picker in a
LocalizationProviderand ReactPy has limited support for nesting JS components - the
LocalizationProviderrequires a JSdateAdapterand 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.
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
Thanks for the reply @rmorshea. So that means as of now there is now option to display calendar component using reactpy?
Beta Was this translation helpful? Give feedback.
All reactions
-
It is possible via the custom components API but that requires writing some Javascript.
Beta Was this translation helpful? Give feedback.