<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,
                              }}
                            />

the default date format that i receive from this code of text field of material UI is : 'dd-mm-yyyy'. But due to my requirements i want the format to be in the form of 'MM-dd-yyyy". I have tried using material Ui date pickers but that breaks my current Ui and the whole designing outlook of the form, hence i cannot use date pickers instead. Please provide me a solution of how to change the format of date WITHOUT USING DATE PICKER.

                            <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,
                              }}
                            />

the default date format that i receive from this code of text field of material UI is : 'dd-mm-yyyy'. But due to my requirements i want the format to be in the form of 'MM-dd-yyyy". I have tried using material Ui date pickers but that breaks my current Ui and the whole designing outlook of the form, hence i cannot use date pickers instead. Please provide me a solution of how to change the format of date WITHOUT USING DATE PICKER.

• javascript
• reactjs
• date
• format
• material-ui

1 Answer 1

This should work :

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;