あなたの好みのロケールに材料UI dateickerをローカライズする方法

yarn add @material-ui/pickers@^3.0.0

yarn add @date-io/date-fns@^2.0.0
yarn add @date-io/moment@^1.0.0
yarn add @date-io/core@^1.0.
yarn add date-fns@^2.0.0
yarn add moment@^2.0.0

DataPickerComponent。js

import React from 'react';
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { createMuiTheme, ThemeProvider} from '@material-ui/core/styles';
import MomentUtils from "@date-io/moment";
import moment from "moment";
import "moment/locale/sw";

const DatePickerComponent = ({ date, setDate}) => {

  const theme = createMuiTheme({
    palette: {
      primary: {
        main: '#2EC4B6'
      },
      secondary: {
        main: '#2EC4B6'
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils} locale={"sw"} >
        <DatePicker
          required
          format="L"
          clearable
          okLabel="Sawa"
          clearLabel="Futa"
          cancelLabel="Hairisha"
          value={date}
          variant="dialog"
          maxDateMessage=""
          mask="__/__/____"
          placeholder="dd/MM/yyyy"
          onChange={(dateChanged) => setDate(dateChanged)}
          views={["year", "month", "date"]}
          InputProps={{ disableUnderline: true }}
        />
      </MuiPickersUtilsProvider>
    </ThemeProvider>
  );

};

export default DatePickerComponent;

ハッピーハッキング！