如何在材质 UI 文本字段中格式化日期？答案

【问题标题】：How to format date in a material UI textfield?如何在材质 UI 文本字段中格式化日期？
【发布时间】：2020-07-25 20:20:13
【问题描述】：

                            <TextField
                              name="BalDueDate"
                              format="MM/dd/yyyy"
                              value={basicDetails.BalDueDate.slice(0,10)}
                              onChange={event => {
                                setBasicDetails({
                                  ...basicDetails,
                                  [event.target.name]: event.target.value,
                                });
                              }}
                              label="Bal. Due Date"
                              type="date"
                              variant="outlined"
                              className={classes.textField}
                              InputLabelProps={{
                                shrink: true,
                              }}
                            />

我从材料 UI 的此文本字段代码收到的默认日期格式是：'dd-mm-yyyy'。但由于我的要求，我希望格式为“MM-dd-yyyy”的形式。我曾尝试使用材料 Ui 日期选择器，但这破坏了我当前的 Ui 和表单的整个设计外观，因此我不能使用日期选择器。请为我提供一个如何在不使用日期选择器的情况下更改日期格式的解决方案。

【问题讨论】：

标签： javascript reactjs date format material-ui

【解决方案1】：

这应该可行：

import React from "react";
    import { makeStyles } from "@material-ui/core/styles";
    import TextField from "@material-ui/core/TextField";
    
    const useStyles = makeStyles(theme => ({
      root: {
        position: "relative"
      },
      display: {
        position: "absolute",
        top: 2,
        left: 0,
        bottom: 2,
        background: "white",
        pointerEvents: "none",
        right: 50,
        display: "flex",
        alignItems: "center"
      },
      input: {}
    }));
    
    function InputComponent({ defaultValue, inputRef, ...props }: any) {
      const classes = useStyles();
      const [value, setValue] = React.useState(() => props.value || defaultValue);
    
      const handleChange = event => {
        setValue(event.target.value);
        if (props.onChange) {
          props.onChange(event);
        }
      };
    
      return (
        <div className={classes.root}>
          <div className={classes.display}>{value}</div>
          <input
            className={classes.input}
            ref={inputRef}
            {...props}
            onChange={handleChange}
            value={value}
          />
        </div>
      );
    }
    
    function DatePickers() {
      return (
        <TextField
          id="date"
          label="Birthday"
          type="date"
          InputProps={{
            inputComponent: InputComponent
          }}
          defaultValue="2017-05-24"
          InputLabelProps={{
            shrink: true
          }}
        />
      );
    }
    
    export default DatePickers;

【讨论】：