如何自定义材质UI选取器以具有通用的月/天

Question

如何自定义一个月的天数？我想把它标记为第1-12个月，每个月有35天，而不是从1月到12月？

我正在使用Material pickers v2:中的InlineDatePicker组件

<InlineDatePicker />

Answer 1

您必须覆盖用于特定字段的方法。我不知道具体是哪一个改变了什么，但你可以尝试一下；错误，直到你得到它。

我创建了LocalizedUtils。

下面是一个可以使用MomentJs中的Utils工具更改的两个字段的示例。如果你正在使用DateFns，应该有类似的东西：

https://codesandbox.io/s/material-ui-pickers-playground-ftdq4?file=/App.js

import React from "react";
import { MuiPickersUtilsProvider } from "material-ui-pickers";
import MomentUtils from "@date-io/moment";
import { InlineDatePicker } from "material-ui-pickers";
import moment from "moment";
class LocalizedUtils extends MomentUtils {
getCalendarHeaderText(date) {
return "AAAAA - " + moment(date).format("ll");
}
getDatePickerHeaderText(date) {
return "BBBBB - " + moment(date).format("ll");
}
}
class App extends React.Component {
state = { date: Date.now() };
handleDateChange = (date, kind) => {
console.log(`change ${kind}:`, date);
this.setState({ date });
};
render() {
return (
<MuiPickersUtilsProvider utils={LocalizedUtils}>
<h1>InlineDatePicker</h1>
<InlineDatePicker
clearable
keyboard
value={this.state.date}
onChange={date => this.handleDateChange(date, "InlineDatePicker")}
/>
</MuiPickersUtilsProvider>
);
}
}
export default App;