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

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)

 <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={date}
          // onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />


      </MuiPickersUtilsProvider>

Thanks

Answer

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

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
      open
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value={date}
      // onChange={handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
    />


  </MuiPickersUtilsProvider>

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

this.state = { isDatePickerOpen: true };

Then use the state to open and close the picker.

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <KeyboardDatePicker
      open={this.state.isDatePickerOpen}
      disableToolbar
      variant="inline"
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      label="Date picker inline"
      value={date}
      // onChange={handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
    />


  </MuiPickersUtilsProvider>

Advertisement

Answer