CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
user7307981
user7307981

Reputation:

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?

I'm using the InlineDatePicker component from Material-pickers v2:

<InlineDatePicker />

Upvotes: 2

Views: 708

Answers (1)

Salmin Skenderovic
Salmin Skenderovic

Reputation: 1720

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.

Here is an example of two fields you can change with the Utils-tool from MomentJs. If you are using DateFns there should be something similar:

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;

Upvotes: 1

Related Questions