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-org/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 in English. Beside, 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 is not fulfill the requirement from our BI.
Any advise on changing TextField datetime format is appreciated.

Thank you very much.

Olivier Tassinari Olivier Tassinari · Accepted Answer · 2019-03-07T09:39:16

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.

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.
You can use https://github.com/dmtrKovalenko/material-ui-pickers that handles the formatting outside of the box.

Material-UI Textfield with specific date format

1 Answers