【问题标题】: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>
      

      【讨论】:

        猜你喜欢
        • 2018-06-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-10-26
        • 2018-03-14
        • 2018-09-28
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多