具有特定日期格式的 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”

TextField with datetime-local on my PC

代码如下:

    <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" Prop 是原生<input>元素属性。您受到浏览器支持的格式的限制。您有两个选择。

1. 如果您想继续使用 native 实现，您可以提供自定义 inputComponent使用 date-fns 或 moment 等库处理格式化的 prop。
2. 您可以使用 https://github.com/dmtrKovalenko/material-ui-pickers处理框外的格式。