[英]How to customize Material-UI-Pickers to have generic months/days
How do I customize the number of days in a month?如何自定义一个月的天数? Say instead of tabbing through Jan-Dec, I want it to be labelled Month 1-12 and each month has 35 days in it?假设不是在 1 月到 12 月之间切换,我希望它被标记为 1 月到 12 月并且每个月有 35 天?
I'm using the InlineDatePicker component from Material-pickers v2:我正在使用 Material-pickers v2 中的 InlineDatePicker 组件:
<InlineDatePicker />
You will have to override the methods used for the specific field.您将必须覆盖用于特定字段的方法。 I can't find exactly which one changes what, but you can trial & error until you get it.我找不到确切的哪一个改变了什么,但你可以反复试验直到你得到它。
I created LocalizedUtils which does this.我创建了执行此操作的 LocalizedUtils。
Here is an example of two fields you can change with the Utils-tool from MomentJs.这是您可以使用 MomentJs 的 Utils 工具更改的两个字段的示例。 If you are using DateFns there should be something similar:如果您使用的是 DateFns,应该有类似的内容:
https://codesandbox.io/s/material-ui-pickers-playground-ftdq4?file=/App.js 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.