Can not format textField of type date in the form 'DD/MM/YYYY'

Can not format textField of type date in the form ‘DD/MM/YYYY’. The options for type are limited. Why not have a format field

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

TextField should have a format prop that will help format date in any format. eg.

<TextField
                onChange={onDateChange}
                id="date"
                label="Date Received"
                type="date"
                format={'DD/MM/YYYY'}
                value={dateRecieved}
                className={classes.textField}
                margin="normal"
                InputLabelProps={{
                  shrink: true
                }}
/>

Current Behavior

Currently the type options doesn’t allow to format in DD/MM/YYYY form.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.32
React	3.7.2
browser	chrome
etc

[oliviertassinari]

@yuvraj88 You have two options:

1. Use @material-ui/pickers
2. Use a custom inputComponent prop with the native implementation. It would probably only work well on mobile.

https://codesandbox.io/s/zq89ym8v74

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;

[MaheshKalyankar]

Its strange… it takes the local machine’s date time format.