材料表中的日期選擇器本地化（材料 UI）

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

在列中添加 dateSetting。

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

Answer 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;

Answer 3

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>