如何在材质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

代码段

zip

请注意：由于遇到一些无关的错误，我不得不使用 <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> 的1x版本。 See here。在玩耍时要牢记。