React Js - 清除 Material UI Datepicker

Posted 2023-02-22

【中文标题】React Js - 清除 Material UI Datepicker

【英文标题】：React Js - clear Material UI Datepicker

【发布时间】：2016-07-05 04:54:30

【问题描述】：

我在使用Material UI 的Datepicker 时遇到了一些问题，我正在寻找一种方法来reset 它的领域，但我没有找到办法。 我也咨询过this 问题。 有人可以帮帮我吗？

【问题讨论】：

我不确定材料设计的 DatePicker 是否需要重置

【参考方案1】：

在 Material ui 4.0.0 以上版本中，您必须设置空字符串来重置日期选择器。

    value=person.birthday ?? ''

【参考方案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;

【参考方案3】：

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

【参考方案4】：

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