具有特定日期格式的 Material-UI 文本字段

Question

我是 Material UI 的新手，目前正在使用日期时间处理 TextField 显示。我在https://material-ui.com/demos/pickers/ 中测试了代码。这符合我们的需求。

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

我可以有一些示例代码来实现这个要求吗？
我屏幕上的 TextField 显示为中文（因为我的区域设置是香港？），我想将其更改为英文显示。此外，日期格式为 DD/MM/YYYY HH:SS。我想把它改成“DD-MMM-YYYY HH:SS”

我的 PC 上带有本地日期时间的 TextField

下面是代码：

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

顺便说一句，我还测试了 material-ui-picker，它不满足我们 BI 的要求。
任何有关更改 TextField 日期时间格式的建议表示赞赏。

非常感谢。

Answer 1

所述type="datetime-local"支柱是天然<input>元素属性。您受到浏览器支持的格式的限制。你有两个选择。

1. 如果您想继续使用本机实现，您可以提供一个自定义inputComponent道具，该道具使用诸如 date-fns 或 moment 之类的库来处理格式。
2. 您可以使用https://github.com/dmtrKovalenko/material-ui-pickers处理框外的格式。