材料表中的日期选择器本地化（材料 UI）答案

【问题标题】：Date picker localization in material-table(Material UI)材料表中的日期选择器本地化（材料 UI）
【发布时间】：2020-07-05 17:06:02
【问题描述】：

有谁知道如何在材料表（材料 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;

【问题讨论】：

文本本地化还是日期格式？请更具体并添加一些您已实现的代码
文本的本地化。

标签： javascript reactjs datepicker localization material-ui

【解决方案1】：

在列中添加 dateSetting。

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

【讨论】：

【解决方案2】：

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 idLocale from 'date-fns/locale/id';

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: idLocale
        }
      }}
    />
  );
}

export default App;

【讨论】：

【解决方案3】：

localization的Material-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>

【讨论】：