I have a calendar from Material UI which only opens when I click on it so it starts like this
And then opens to this
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
x
18
18
1
<MuiPickersUtilsProvider utils={DateFnsUtils}>
2
<KeyboardDatePicker
3
disableToolbar
4
variant="inline"
5
format="MM/dd/yyyy"
6
margin="normal"
7
id="date-picker-inline"
8
label="Date picker inline"
9
value={date}
10
// onChange={handleDateChange}
11
KeyboardButtonProps={{
12
'aria-label': 'change date',
13
}}
14
/>
15
16
17
</MuiPickersUtilsProvider>
18
Thanks
Advertisement
Answer
You can actually use open
prop. Here is an example.
JavaScript
1
19
19
1
<MuiPickersUtilsProvider utils={DateFnsUtils}>
2
<KeyboardDatePicker
3
open
4
disableToolbar
5
variant="inline"
6
format="MM/dd/yyyy"
7
margin="normal"
8
id="date-picker-inline"
9
label="Date picker inline"
10
value={date}
11
// onChange={handleDateChange}
12
KeyboardButtonProps={{
13
'aria-label': 'change date',
14
}}
15
/>
16
17
18
</MuiPickersUtilsProvider>
19
If you want to control it with state then create a state variable with default to true.
JavaScript
1
2
1
this.state = { isDatePickerOpen: true };
2
Then use the state to open and close the picker.
JavaScript
1
19
19
1
<MuiPickersUtilsProvider utils={DateFnsUtils}>
2
<KeyboardDatePicker
3
open={this.state.isDatePickerOpen}
4
disableToolbar
5
variant="inline"
6
format="MM/dd/yyyy"
7
margin="normal"
8
id="date-picker-inline"
9
label="Date picker inline"
10
value={date}
11
// onChange={handleDateChange}
12
KeyboardButtonProps={{
13
'aria-label': 'change date',
14
}}
15
/>
16
17
18
</MuiPickersUtilsProvider>
19