如何自定义日历标题文本格式(资料UI v5 - DatePicker)

Question

我想在Material中更改日历顶部显示的字符串的格式。有办法这样做吗？

​

​

React和Material正在使用以下版本。

"17.0.1"

• "@material-ui/core"："5.0.0-beta.0"

• "@material-ui/lab"："5.0.0-alpha.39"

：

• “react”

我试图按如下方式设置LocalizationProvider的LocalizationProvider属性，但无法更改它。

import TextField from '@material-ui/core/TextField';
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
import DatePicker from '@material-ui/lab/DatePicker';

const DatePickerSample = () => {
  const [dateValue, setDateValue] = React.useState<object>(new Date(Date.now()));

  // not work.
  const formats = {
    monthAndYear: "yyyy MM",
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} dateFormats={formats}>
        <DatePicker label="DatePicker1"
            value={dateValue}
            inputFormat="yyyy/MM/dd"
            mask="____/__/__"
            onChange={(newValue) => {
                if (newValue) { setDateValue(newValue); }
            }}
            renderInput={(params) => <TextField {...params} required />}
    </LocalizationProvider>
  );
}

如果有办法做到这一点，如果你能告诉我，我将不胜感激。

Answer 1

做这件事没有正常的方法。我查过源代码了。我想你可以像下面这样使用一些肮脏的黑客。它不会永远起作用：

.PrivatePickersFadeTransitionGroup-root:first-child {
    order: 2;
}
.PrivatePickersFadeTransitionGroup-root:last-child {
    order: 1;
}
.MuiCalendarPicker-root button {
    order: 3;
}