如何从 matirial-ui 中的 TextField 中删除默认的 mm/dd/yyyy？

Question

我正在使用material-ui并且我想制作一个datetime-picker. 如果用户没有选择任何内容，我希望仅显示标签“日期”，但正如您在下面的图片中看到的，有一些默认mm/dd/yyyy字符。有什么办法可以去除它们吗？

由于这些字符，您几乎看不到标签： ,

单击后，标签出现（我想要的），但同样，我有 mm/dd/yyyy

这是我正在使用的代码：

<Grid item>
       <TextField
        classes={{ root: classes.textFieldRoot }}
         name="Date"
         label="Date"
         type="datetime-local"
         />
    </Grid>

这就是我想要得到的：

用户点击之前：

用户选择日期和时间后：

Answer 1

您可以通过 来处理state。当输入获得焦点或有值时，其类型将更改为datetime-local输入。否则，当输入模糊或没有值时，其类型将更改为text以实现您的目标。

import { TextField } from "@material-ui/core";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [focus, setFocused] = useState(false);
  const [hasValue, setHasValue] = useState(false);
  const onFocus = () => setFocused(true);
  const onBlur = () => setFocused(false);
  return (
    <>
      <TextField
        onFocus={onFocus}
        onBlur={onBlur}
        InputProps={{
          classes: {
            input: "CustomTextField"
          }
        }}
        onChange={(e) => {
          if (e.target.value) setHasValue(true);
          else setHasValue(false);
        }}
        label="Date"
        type={hasValue || focus ? "datetime-local" : "text"}
      />
    </>
  );
}