Material UI 日期选择器日历在页面呈现时立即打开

Question

我有一个来自 Material UI 的日历，它只有在我点击它时才会打开，所以它是这样开始的

然后打开这个

有没有办法让我在页面呈现后立即打开它？我不确定我是否遗漏了一些 material 开箱即用的道具，或者是否有其他方法可以让它一直打开。

这是我目前所拥有的（直接来自那里的文档）

 <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>

谢谢

Answer 1

您实际上可以使用 open 道具。这是一个例子。

<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>

如果你想用状态来控制它，那么创建一个默认为 true 的状态变量。

this.state = { isDatePickerOpen: true };

然后使用状态打开和关闭拾取器。

<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>

Material UI 日期选择器日历在页面呈现时立即打开

Material UI Date Picker Calendar Open Immediately On Page Render

javascript

calendar

datepicker

reactjs

material-ui