🐛[BUG] ProTable.ProColumns.FieldProps.Format is not localizable.

[xXAvoraXx]

export const useApplicationTableColumns = (): ProColumns<DTOS.ApplicationDto>[] => {
  return [
    {
      title: 'Creation Date',
      dataIndex: 'creationDate',
      valueType: 'dateTime',
      fieldProps: {
        format: 'L'
      }
    }
  ];
};

console.log(record.creationDate);

--> "creationDate": "2023-07-03T12:54:28",

Screenshots.

config.ts

  moment2dayjs: {
    preset: 'antd',
    plugins: ['duration', 'advancedFormat', 'localeData', 'localizedFormat', 'utc', 'timezone'],
  },

package.json

"dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@ant-design/pro-components": "^2.6.4",
    "@ant-design/use-emotion-css": "1.0.4",
    "@umijs/route-utils": "^2.2.2",
    "ahooks": "^3.7.8",
    "antd": "^5.6.4",
    "classnames": "^2.3.2",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "omit.js": "^2.0.2",
    "querystring": "^0.2.1",
    "rc-menu": "^9.9.2",
    "rc-util": "^5.32.2",
    "react": "^18.2.0",
    "react-dev-inspector": "^1.8.4",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^2.1.5",
    "@testing-library/react": "^13.4.0",
    "@types/classnames": "^2.3.1",
    "@types/express": "^4.17.17",
    "@types/history": "^4.7.11",
    "@types/jest": "^29.5.1",
    "@types/lodash": "^4.14.195",
    "@types/react": "^18.2.7",
    "@types/react-dom": "^18.2.4",
    "@types/react-helmet": "^6.1.6",
    "@umijs/fabric": "^2.14.1",
    "@umijs/lint": "^4.0.72",
    "@umijs/max": "^4.0.72",
    "cross-env": "^7.0.3",
    "eslint": "^8.41.0",
    "express": "^4.18.2",
    "gh-pages": "^3.2.3",
    "husky": "^7.0.4",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "lint-staged": "^10.5.4",
    "mockjs": "^1.1.0",
    "prettier": "^2.8.8",
    "swagger-ui-dist": "^4.19.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.0",
    "umi-presets-pro": "^2.0.3"
  },
  "engines": {
    "node": ">=12.0.0"
  }

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

感谢您提交的问题。

根据您提供的信息，您遇到的问题是关于 ProTable 组件 ProColumns 的 FieldProps 的 format 属性无法本地化的问题。根据您的代码和截图，您使用的 ProTable 版本是 2.x。

要解决此问题，您需要进行以下步骤：

1. 确保您的国际化配置已正确设置。在您提供的代码中，您的配置文件 config.ts 中已经包含了 moment2dayjs 插件的相关设置，这是用于处理 moment.js 的国际化的配置。请确保该配置已正确添加，且 moment.js 的语言包已安装。您可以通过 yarn add moment 来安装 moment.js。

2. 在您的应用程序的入口文件中引入 moment/locale/zh-cn 或 moment/locale/en-gb（根据您的语言需求）。例如：

import 'moment/locale/zh-cn';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

3. 确保正确设置了语言环境。可以在入口文件中使用 moment.locale('zh-cn') 或 moment.locale('en-gb') 来设置语言环境。例如：

import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

4. 如果您的应用是基于 Ant Design Pro v5.x，您还需要确保您的项目的依赖项中包含了 moment 和 moment-duration-format，并且已正确配置了 babel-plugin-import 插件。可以参考 Ant Design Pro v5.x 的文档：https://procomponents.ant.design/docs/i18n-cn

通过这些步骤，您应该能够解决 ProTable 组件 ProColumns 的 FieldProps 的 format 属性无法本地化的问题。

希望对您有所帮助！如果您还有其他问题，请随时提问。

[xXAvoraXx]

this is not the answer to the question.

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

I apologize for the misunderstanding. To address the issue you mentioned, the ProTable.ProColumns.FieldProps.Format not being localizable, you can use the moment.js library to format the date in a localized manner.

In your code snippet, you're already using the moment.js library. To make the date format localized, you can add the following code:

import moment from 'moment';
import 'moment/locale/zh-cn'; // Import the locale you want to use, e.g., Chinese (Simplified)

export const useApplicationTableColumns = (): ProColumns<DTOS.ApplicationDto>[] => {
  return [
    {
      title: 'Creation Date',
      dataIndex: 'creationDate',
      valueType: 'dateTime',
      fieldProps: {
        format: moment.localeData().longDateFormat('L') // Use the localized format
      }
    }
  ];
};

By importing the specific locale you want to use and setting the format to moment.localeData().longDateFormat('L'), the date format will be localized according to the chosen locale.

Make sure you have the necessary dependencies installed:

"dependencies": {
  "moment": "^2.29.4"
}

Also, ensure that you have the correct version of the "@ant-design/pro-components" package installed.

Please give this solution a try, and let me know if you have any further questions or issues.

[xXAvoraXx]

But this is a bug, You can't fix this issue like this;

fieldProps: {
        format: moment.localeData().longDateFormat('L') // Use the localized format
      }

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

I apologize for the misunderstanding. If the issue you're facing is indeed a bug with the ProTable component's FieldProps format not being localizable, I'm sorry for the confusion.

As a GitHub issue assistant, I can't directly fix bugs in the ProTable component. However, I can provide some suggestions on how to approach and potentially resolve the issue:

1. Check for existing GitHub issues: Before raising a new issue, it's always a good idea to search the GitHub repository of the ProTable component to see if there are any existing issues related to the problem you're facing. This might help you find relevant discussions or potential workarounds.

2. Confirm the bug: Ensure that the issue you're facing is indeed a bug and not a misconfiguration or misuse of the ProTable component. Review the ProTable documentation and examples to ensure that you're using the component correctly.

3. Open a new GitHub issue: If you've confirmed that it is a bug and you couldn't find any existing issues related to it, consider opening a new issue on the GitHub repository of the ProTable component. Clearly describe the problem, provide a minimal reproducible example, and include any relevant error messages or screenshots.

4. Engage with the community: Once the issue is opened, engage with the community by sharing your problem and discussing potential solutions. Collaborating with other developers and the maintainers of the ProTable component can help in identifying the root cause of the bug and finding a resolution.

Remember to follow the issue template and guidelines provided by the project maintainers when opening a new issue.

I'm sorry for any inconvenience caused by the bug. I recommend following the steps above to address the issue properly.

[xXAvoraXx]

@chenshuai2144

[chenshuai2144]

我们用的是dayjs，你试试dayjs

[xXAvoraXx]

我们用的是dayjs，你试试dayjs

我也使用 dayjs，但 ProColumns 'format' 属性无法识别 localizedFormat。

[chenshuai2144]

是不是 dayjs 的插件没装，你搞个重现呗。 我们这样算命算不出来的

https://github.com/iamkun/dayjs/issues/680

[xXAvoraXx]

The dayjs plugin is already installed in umijs, is there any point in reinstalling it? umijs 中已經安裝了 dayjs 插件，是否需要重新安裝

I added the required plugins in the umijs config file. 我在 umijs 配置文件中添加了所需的插件。

 moment2dayjs: {
    preset: 'antd',
    plugins: ['duration', 'advancedFormat', 'localeData', 'localizedFormat', 'utc', 'timezone'],
  },

Do I need to install dayjs externally to use the format property of ProColumns' dateTime valueType property? Did I get right? 我是否需要在外部安裝 dayjs 才能使用 ProColumns 的 dateTime valueType 屬性的 format 屬性？ 我做對了嗎？

I'm currently solving this situation as follows, but I would prefer to be able to use the "format" property. 我目前正在按如下方式解決這種情況，但我更希望能夠使用“格式”功能。

    {
      title: 'Creation Date',
      dataIndex: 'creationDate',
      valueType: 'dateTime',
      render: (dom, entity) => {
        const creationDate = dayjs(entity.creationDate).format('L HH:mm:ss');
        return creationDate;
      },
    },

[lynette-li]

已内置支持，可以升级到 2.7.15 以使用该特性。