使用gantt-task-react+TypeScript：将日期转为DD/MM/YYYY并返回Date对象

问题背景 #

使用gantt-task-react组件时，需要将任务的start和end日期以DD/MM/YYYY格式展示，但组件仅接受Date类型作为这两个字段的输入，直接用dayjs转换为字符串会导致组件无法正常工作。

现有Task结构示例 #

let tasks: Task[] = [
    {
      start: new Date(),
      end: new Date(),
      name: 'Idea',
      id: 'Task 0',
      type:'task',
      progress: 45,
      isDisabled: true,
      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
    },
    // 更多任务...
];

当前无效的转换代码 #

export const formatDate = (date?: Date | string): string => {      
    return dayjs(date).format('DD/MM/YYYY');
}

解决方案 #

核心思路：保持start和end为Date类型以满足组件要求，仅在展示层面做日期格式化，有两种可行方式：

方式1：使用组件自带的dateFormat属性 #

如果你的gantt-task-react版本支持，直接通过组件的dateFormat prop指定展示格式即可，无需额外编写渲染逻辑：

import { Gantt } from 'gantt-task-react';

<Gantt
  tasks={tasks}
  dateFormat="DD/MM/YYYY"
  // 其他必要属性，如viewMode、onTaskClick等
/>

方式2：自定义任务渲染器（taskRenderer） #

若组件版本不支持dateFormat，或需要更灵活的展示样式，可通过taskRenderer自定义任务的渲染内容，手动格式化日期：

import { Gantt, TaskProps } from 'gantt-task-react';
import dayjs from 'dayjs';

// 自定义任务渲染函数
const renderCustomTask = (task: TaskProps) => {
  const formattedStart = dayjs(task.start).format('DD/MM/YYYY');
  const formattedEnd = dayjs(task.end).format('DD/MM/YYYY');
  
  return (
    <div className="custom-task">
      <div className="task-name">{task.name}</div>
      <div className="task-date-range">{`${formattedStart} - ${formattedEnd}`}</div>
      {/* 可根据需求添加进度条、样式等其他元素 */}
    </div>
  );
};

// 使用组件时传入自定义渲染器
<Gantt
  tasks={tasks}
  taskRenderer={renderCustomTask}
  // 其他必要属性
/>

注意事项 #

• 不要修改Task对象中start和end的类型，必须保持为Date，否则组件的时间计算（如任务时长、 timeline 定位）会出错。
• 确保已正确安装并导入dayjs依赖。

内容的提问来源于stack exchange，提问作者Dora07