多层list嵌套中的日期组件，getFieldsFormatValue未对其生效🐛[BUG]

[LiuJianhuo]

🐛 bug 描述

多层list嵌套，在深层嵌套的list中使用日期组件设置了format，但使用getFieldsFormatValue返回的数据并未格式化

💻 复现代码

import { ProFormInstance, ProFormItem, ProFormTimePicker } from '@ant-design/pro-components';
import { ProForm, ProFormList } from '@ant-design/pro-components';
import { useRef } from 'react';

export default () => {
  const formRef = useRef<
    ProFormInstance<{
      name: string;
      company?: string;
      useMode?: string;
    }>
  >();
  return (
    <ProForm<{
      name: string;
      company?: string;
      useMode?: string;
    }>
      formRef={formRef}
      formKey="base-form-use-demo"
      autoFocusFirstInput
    >
      <ProFormList name="list" initialValue={[{}]}>
        {() => {
          return (
            <ProFormList name={'list'} initialValue={[{}]}>
              <ProFormTimePicker
                name="time"
                label="time:"
                fieldProps={{
                  showTime: {
                    format: 'HH:mm',
                  },
                  format: 'HH:mm',
                }}
              ></ProFormTimePicker>
            </ProFormList>
          );
        }}
      </ProFormList>
      <ProFormItem shouldUpdate>
        {() => {
          return (
            <div>
              getFieldsFormatValue格式化：
              {JSON.stringify(formRef.current?.getFieldsFormatValue?.())}
            </div>
          );
        }}
      </ProFormItem>
      <ProFormItem shouldUpdate>
        {() => {
          return (
            <div>getFieldsValue未格式化：{JSON.stringify(formRef.current?.getFieldsValue?.())}</div>
          );
        }}
      </ProFormItem>
    </ProForm>
  );
};

🏞 期望结果

© 版本信息

• ProComponents 版本: 最新版本

[LiuJianhuo]

急急急！！！

[PlutoCA]

你确定TimePicker 支持 format么

[hb1707]

这里同样遇到问题，不是多层，单层就遇到了。比如time字段传字符串”10:00“，format:"HH:mm",那么输入框直接给了一个Invalid Date，升级到最新版^2.0.0后才出现的这个bug，现在必须得传moment格式或者完整时间“2022-09-05 10:00..”的字符串 ,可是提交表单时候字段值也是moment，这样就很麻烦了。

这个问题导致我只能放弃使用ProFormTimePicker，改用ProFormText

<Col> <ProFormTimePicker label="时间" placeholder="时间" name="time" fieldProps={{ style: { width: '100%', }, format: "HH:mm" }} /> </Col>

[LiuJianhuo]

有关日期的 format且多层的都有这个问题，第一层format会生效，看了源代码，是源代码有问题。

key 应该改为namePath传入进去，就没问题了

[LiuJianhuo]

我目前用的是@ant-design/pro-form 1.65.0

[LiuJianhuo]

？？？没人解决吗

[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 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

抱歉，由于我是机器人助理，有时无法立即回复。对于您的问题，我建议您升级到最新版 ant-design/[email protected]，并使用 moment.js 来格式化日期和时间，具体方式如下：

首先，使用 moment.js 这个库需要在项目中先引入。可以使用 npm install moment 或者 yarn add moment 来安装。

其次，在 ProForm 组件中使用 ProFormDatePicker 和 ProFormTimePicker，同时在 fieldProps 中加入 render 方法，使用 moment.js 格式化日期和时间。代码示例如下：

import moment from 'moment';
import { ProFormDatePicker, ProFormTimePicker } from '@ant-design/pro-form';

<ProFormDatePicker
  label="日期"
  name="date"
  fieldProps={{
    render: (_, defaultDOM) => {
      return (
        <span>
          {defaultDOM}
          {defaultDOM && defaultDOM?.props?.value && moment(defaultDOM?.props?.value).format('YYYY-MM-DD')}
        </span>
      );
    },
  }}
/>

<ProFormTimePicker
  label="时间"
  name="time"
  fieldProps={{
    render: (_, defaultDOM) => {
      return (
        <span>
          {defaultDOM}
          {defaultDOM && defaultDOM?.props?.value && moment(defaultDOM?.props?.value).format('HH:mm')}
        </span>
      );
    },
  }}
/>

注意：ProFormDatePicker 和 ProFormTimePicker 组件必须在 fieldProps 中加入 render 方法才能生效。

希望这能够帮助到您！