How to change the language for KeyboardDatePicker material ui?

Question

I am currently using material ui on the web and I use the KeyboardDatePicker API and it works perfectly, but the names of the months and the text of the buttons are shown in English and I want to change them to Spanish. I read the API documentation but I can't find information about it.

Anyone know how to change the language?

Answer 1

Another solution which worked for me is using date-fns/locale/*. The documentation can be found here.

For example in german:

import {KeyboardDatePicker, MuiPickersUtilsProvider} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import deLocale from "date-fns/locale/de";


render () {
   return 
   (
      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={deLocale}>
      .
      .
      .
      </MuiPickersUtilsProvider>
   )
}

Result:

Answer 2

Try importing spanish moment locale and then using it in MuiPickersUtilsProvider:

import React from "react";
import ReactDOM from "react-dom";
import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import "moment/locale/es";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <MuiPickersUtilsProvider locale="es" utils={MomentUtils}>
        <KeyboardDatePicker />
      </MuiPickersUtilsProvider>
    </div>
  );
}