我目前在网络上使用 material ui,我使用 KeyboardDatePicker API 并且它运行良好,但月份名称和按钮文本以英文显示,我想将它们更改为西班牙语。我阅读了 API 文档,但找不到有关它的信息。
谁知道怎么改语言?
我目前在网络上使用 material ui,我使用 KeyboardDatePicker API 并且它运行良好,但月份名称和按钮文本以英文显示,我想将它们更改为西班牙语。我阅读了 API 文档,但找不到有关它的信息。
谁知道怎么改语言?
尝试导入西班牙时刻语言环境,然后在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>
);
}
另一个对我有用的解决方案是使用date-fns/locale/*
. 文档可以在这里找到。
例如德语:
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>
)
}
结果:
对于西班牙语,对我有用的解决方案如下
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>
)
}