如何在 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 道具並將其設置為 true。

工作演示在這里

代碼片段

      <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 版本，因為我遇到了一些不相關的錯誤。 見這里。 玩的時候記住這一點。