如何在 Material UI 的 DateTimePicker 中再添加一个按钮？

Question

我在我的 React 应用程序中使用 DateTimePicker。

我想在取消按钮的左侧添加一个清除按钮。

import { MuiPickersUtilsProvider, DateTimePicker } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";

<MuiPickersUtilsProvider utils={DateFnsUtils}>
            <DateTimePicker
              autoOk
              inputVariant="outlined"
              value={date}
              onChange={e =>handleSetDate(e.getTime())
              }
            />
          </MuiPickersUtilsProvider>

我该怎么做？

提前致谢！！

Answer 1

只需使用 clearable prop 并将其设置为 true。

Working demo is here

代码片段

      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DateTimePicker
          autoOk
          label="Clearable"
          clearable
          disableFuture
          value={selectedDate}
          // onChange={handleDateChange}  //<---reset back to blank date
          onChange={(e) => { handleDateChange(e ? e : new Date()) }} //<---reset back to initial date
        />
      </MuiPickersUtilsProvider>

请注意：我不得不使用 @date-io/date-fns 的 1x 版本，因为我遇到了一些不相关的错误。 See here。玩的时候记住这一点。