Question

我在使用Material UI Datepicker时遇到了一些麻烦，我正在寻找reset其领域的方法，但我没有＆＃39;}找到一种方法来做到这一点。我也咨询了this问题。有人能帮帮我吗？

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;

Answer 3

null清除日期选择器，例如查看https://codesandbox.io/s/material-ui-pickers-clear-hhlvg

Answer 4

目前null会返回错误dateUtils.js?04d5:92 Uncaught TypeError: Cannot read property 'getFullYear' of null。对我有用的是使用undefined代替。

React Js - 清除Material UI Datepicker

4 个答案: