如何更改 KeyboardDatePicker 材料 ui 的语言？答案

【问题标题】：How to change the language for KeyboardDatePicker material ui?如何更改 KeyboardDatePicker 材料 ui 的语言？
【发布时间】：2019-11-03 04:07:51
【问题描述】：

我目前在网络上使用材料 ui，我使用 KeyboardDatePicker API，它运行良好，但月份名称和按钮文本以英文显示，我想将它们更改为西班牙文。我阅读了 API 文档，但找不到相关信息。

有人知道如何更改语言吗？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

尝试导入西班牙时刻语言环境，然后在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>
  );
}

【讨论】：

【解决方案2】：

另一个对我有用的解决方案是使用date-fns/locale/*。可以在here找到文档。

例如德语：

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>
   )
}

结果：

【讨论】：

【解决方案3】：

对于西班牙语，对我有用的解决方案如下

import 'date-fns';
import React from 'react';
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers';
import FormControl from '@material-ui/core/FormControl';
import DateFnsUtils from '@date-io/date-fns';
import deLocale from "date-fns/locale/es";
import {useStyles} from './style';

export default function FormControlDate(props) {
    const classes = useStyles();
    return (
        <FormControl className={classes.formControl} >
            <MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils} >
                <KeyboardDatePicker
                                    disableToolbar
                                    variant="inline"
                                    format="dd/MM/yyyy"
                                    margin="normal"
                                    id={props.name}
                                    name={props.name}
                                    key={props.name}
                                    label={props.label}
                                    value={props.value}
                                    onChange={date=>{
                                        props.handleChange({"target":{"name":props.name,"value":date}})
                                    }}
                                    KeyboardButtonProps={{
                                        'aria-label': 'change date',
                                    }}
                />
            </MuiPickersUtilsProvider>
        </FormControl>  
    )
}

【讨论】：