Material-ui: Can not format textField of type date in the form 'DD/MM/YYYY'

[alfredayibonte]

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

• [x] 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]

Don't miss the notice note on the documentation page section: https://material-ui-next.com/demos/pickers/. The format is implemented by the native <input> element. The issue isn't on our end. Also, consider the documented alternative third-party libraries.

[chason]

So one strange thing I noticed related to this is that I was seeing the same issue, where dates were formatted MM/DD/YYYY and since I'm in an international environment, that just won't do. However, when I went to the 'pickers' page that @oliviertassinari linked above, everything was in YYYY-MM-DD. So I deleted everything in my node_modules directory and reinstalled and now everything is in YYYY-MM-DD.

The only thing I can think of is that I upgraded from the old material-ui into the beta?

[MaheshKalyankar]

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

[yuvraj88]

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

Any Solution for this?

[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;

[karthikjagadeeswaran]

jsx <DateTimePicker label="Date Time" value="2020-03-31T18:30:00.000Z" format="yyyy-MM-dd HH:mm:ss" onChange={(date:Date|null)=>form.setFieldValue(props.name,String(date))} />
Actually i am using the datetime picker in formik i want the output format as yyyy-MM-dd HH:mm:ss but it is coming like Wed Apr 22 2020 00:00:00 GMT+0530 (India Standard Time) and also it doesn't support UTC time.can you anyone help?