React中Ant Design组件日期编辑回显的实现

... ... 略
      title: '结束时间',
      dataIndex: 'end_time',
      align: 'center',

    },
    {
      title: '操作',
      align: 'center',
      render: (record) => (
        <div style={{ width: '90%', display: 'flex', justifyContent: 'space-between', marginLeft: '10px' }}>
          <Button type="primary" onClick={() => handleEdit(record)}>编辑</Button>
          <Button type="primary" danger>下架</Button>
        </div>
      ),
    },
  ];

// 点击编辑按钮
  const handleEdit = (record: any) => {
    console.log(record);
    const startMoment = moment(record.start_time, "YYYY-MM-DD"); // 确保这里的格式与您的数据格式匹配
    const endMoment = moment(record.end_time, "YYYY-MM-DD"); // 确保这里的格式与您的数据格式匹配
    setEditingItem(record);  // 设置正在编辑的项目数据
    setIsEditing(true);  // 设置为编辑模式
    setOpen(true);  // 打开表单弹窗
    //编辑回显
    form.setFieldsValue({
      itemCompany: record.account,
      itemTitle: record.title,
      itemAddress: record.address,
      itemDate: [startMoment, endMoment], // 将moment对象数组设置到itemDate字段
    });  // 将编辑项目的数据填充到表单中
  };

npm install moment

import moment from 'moment';