时间戳

首页 > 解决方案 > 如何在 Material UI 的 DateTimePicker 中再添加一个按钮？

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

问题描述

我在我的 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>

我怎样才能做到这一点？

提前致谢！！

标签： javascriptreactjsreduxmaterial-uifrontend

解决方案

只需使用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>

提醒一下：我不得不使用版本 1x，@date-io/date-fns因为我遇到了一些不相关的错误。见这里。玩的时候记住这一点。

推荐阅读