Material UI TextField with specific date format

Question

I am new to Material UI and I am currently working on TextField display with datetime. I tested the code in https://material-ui.com/demos/pickers/. That fits our needs.

However, I would like to change the date format and I found that it is implemented by <input> element.
https://github.com/mui/material-ui/issues/10251

May I have some sample code to achieve this requirement?
The TextField display on my screen was in Chinese (as my regional setting is Hong Kong?), I would like to change it to display it in English. Besides, the date format is DD/MM/YYYY HH:SS. I want to change it to "DD-MMM-YYYY HH:SS"

TextField with datetime-local on my PC

Here below is the code:

    <TextField
      id="datetime-local"
      label="From"
      type="datetime-local"
      defaultValue="2017-05-24T10:30"
      className={classes.textField}
      variant="outlined"
      InputLabelProps={{
        shrink: true,
      }}
    />

    <TextField
      id="datetime-local"
      label="To"
      type="datetime-local"
      defaultValue="2017-05-24T10:30"
      className={classes.textField}
      variant="outlined"
      InputLabelProps={{
        shrink: true,
      }}
    />    

BTW, I have also tested material-ui-picker which does not fulfill the requirement from our BI.
Any advice on changing TextField datetime format is appreciated.

Thank you very much.

Answer 1

The type="datetime-local" prop is a native <input> element attribute. You are limited by the formatting your browser is supporting. You have two options.

1. If you want to stay with a native implementation, you can provide a custom inputComponent prop that handles the formatting with a library like date-fns or moment.
2. You can use https://mui.com/x/react-date-pickers/ that handles the formatting outside of the box.