Question

有人知道如何在材料表（材料UI）中进行日期选择器的本地化吗？在此示例中，过滤时使用日期选择器。

import React from 'react';
import MaterialTable from 'material-table';

function App() {
  return (
    <MaterialTable
      title="Simple Action Preview"
      columns={[
        { title: 'Birthday', field: 'birthDay', type: 'date'},
      ]}
      data={[
        { birthDay: "08-30-2020" },
      ]}        
      options={{
        filtering: true
      }}
    />
  );
}

export default App;

Answer 1

localization的材料UI文档

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { zhCN } from '@material-ui/core/locale';

const theme = createMuiTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
}, zhCN);

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

Answer 2

在各列中添加dateSetting。

const columns = [
    {
      title: "Simple Action Preview",
      field: 'birthYear',
      type: "date",
      dateSetting: { locale: "ko-KR"}
      ....
    }
]

Answer 3

npx create-react-app datepicker
cd .\datepicker\
npm install material-table @material-ui/core --save

文件App.js

import React from 'react';
import MaterialTable from 'material-table';
import ruLocale from 'date-fns/locale/ru';

function App() {
  return (
    <MaterialTable
      title="Simple Action Preview"
      columns={[
        { title: 'Birthday', field: 'birthDay', type: 'date'},
      ]}
      data={[
        { birthDay: "08-30-2020" },
      ]}        
      options={{
        filtering: true
      }}
      localization={{
        body: {
          dateTimePickerLocalization: ruLocale
        }
      }}
    />
  );
}

export default App;

物料表中的日期选择器本地化（物料UI）

3 个答案: