React Js - 清晰的 Material UI Datepicker

Question

我在使用Material UI's 时遇到了一些麻烦Datepicker，我正在寻找通往reset其领域的方法，但没有找到方法。我也咨询过这个问题。有人能帮助我吗？

Answer 1

您可以将 value 属性设置为 null，它将清除它。

Answer 2

我发现了同样的问题，研究并找到了解决方案，

我们可以使用InputAdornments其中的关闭按钮。

请记住，我们必须使用“关闭”按钮event.stopPropagation()来停止弹出窗口。DatePicker

您可以看看这里，https://codesandbox.io/s/material-ui-pickers-usage-demo-forked-tptz3 ?file=/src/ App.jsx 或https://tptz3.csb.app /

import React, { useState } from "react";
import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";

import ClearIcon from "@material-ui/icons/Clear";
import { IconButton } from "@material-ui/core";

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  function handleClr(e) {
    e.stopPropagation();
    handleDateChange(null);
  }
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        autoOk
        variant="inline"
        format="dd/MM/yyyy"
        value={selectedDate}
        onChange={handleDateChange}
        InputProps={{
          endAdornment: (
            <IconButton onClick={(e) => handleClr(e)}>
              <ClearIcon />
            </IconButton>
          )
        }}
      />
    </MuiPickersUtilsProvider>
  );
}

export default App;