材料UI Textfield具有特定日期格式

Question

我是材料UI的新手，我目前正在使用DateTime进行TextField Display。我在https://material-ui.com/demos/pickers/中测试了代码。适合我们的需求。

但是，我想更改日期格式，发现它是由<input>元素实现的。
https://github.com/mui/material-ui/issues/10251

我可以有一些示例代码来达到此要求吗？
我的屏幕上的Textfield显示为中文（因为我的区域环境是香港？），我想更改它以用英语显示。此外，日期格式为dd/mm/yyyy hh：ss。我想将其更改为" dd-mmm-yyyy hh：ss"

Textfield在我的PC上使用DateTime-Local

以下是代码：

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

顺便说一句，我还测试了不符合我们bi的要求的材料-UI-picker。
感谢有关更改Textfield DateTime格式的任何建议。

非常感谢。

Answer 1

type="datetime-local" prop是本机<input>元素属性。您受浏览器支持的格式受到限制。您有两个选择。

1. 如果您想保留本机实施，可以提供一个自定义的inputComponent Prop，以使用date-fns或Mongh等库来处理格式。
2. 您可以使用https://mui.com/x/reaect-date-pickers/可以在框外处理格式。