Skip to content
Advertisement

Material UI Date Picker Calendar Open Immediately On Page Render

I have a calendar from Material UI which only opens when I click on it so it starts like this

enter image description here

And then opens to this

enter image description here

Is there anyway I can have it so that it is immediately open as soon as the page renders? I am not sure if I am missing some prop which material gives to us out of the box or if there is another way I can have it open all the time.

Here’s what I have so far (straight from there docs)

JavaScript

Thanks

Advertisement

Answer

You can actually use open prop. Here is an example.

JavaScript

If you want to control it with state then create a state variable with default to true.

JavaScript

Then use the state to open and close the picker.

JavaScript
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement