Как настроить Material-UI-Pickers на общие c месяцев / дней

Question

Как настроить количество дней в месяце? Скажем, вместо перехода через Jan-De c, я хочу, чтобы он был помечен как месяц 1–12, и в каждом месяце 35 дней?

Я использую компонент InlineDatePicker из Material-pickers v2:

<InlineDatePicker />

Answer 1

Вам придется переопределить методы, используемые для указанного поля c. Я не могу найти, что именно меняет, но вы можете методом проб и ошибок, пока не получите это.

Я создал LocalizedUtils, который это делает.

Вот пример двух полей, которые вы можете изменить с помощью Utils-tool из Moment Js. Если вы используете 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;