The date becomes an invalid date

[Akira Kume]

After adding a record, when I run refresh(), the date column

shows “Invalid Date”.

Is there a way to preserve the original date?

The steps to reproduce the issue are as follows:

1. Click the “Add Record” button (task4 is added)

2. Click the “Refresh” button

3. The CustomDateColumn for task4 shows “Invalid Date”.

sample:https://stackblitz.com/edit/react-jhyzwjqs-3yj74kv3?file=datasource.ts,index.js

[Sridharan Jayabalan]

Hi Akira,

 

Greetings from Syncfusion.

 

For your query, we understand that after a page refresh, the custom date column value changes to “Invalid Date”. After reviewing the shared sample, we noticed that it is using an older version of the Syncfusion Gantt Chart. We would like to inform you that this issue does not occur in the latest version. To address this, we recommend upgrading the Gantt Chart to the most recent version (33.1.44). Please refer to the updated sample below for your reference:

 

Sample: https://stackblitz.com/edit/react-jhyzwjqs-tjc5s9sx?file=datasource.ts,index.js

 

Additionally, while reviewing the sample, we observed mismatches between the field names defined in the Gantt taskFields mapping and those used in the newRecordData object. Below is the corrected version of the code for your reference:

 

Code-Snippet:   



const taskSettings = {

    id: 'TaskID',

    name: 'TaskName',

    startDate: 'StartDate',

    endDate: 'EndDate',

    progress: 'Progress',

    parentID: 'ParentID',

    duration: 'Duration',

  };

 

const addRecord = () => {

    const newRecordData = {

      TaskID: 4,  // changed: use exact field name 'TaskID' (Incorrect: TaskId)

      TaskName: 'task4',

      startDate: new Date('2026/4/5'),

      Duration: 5,

      Progress: 0, // changed: use exact field name 'Progress' (Incorrect: Pregress)

      CustomDateColumn: new Date('2026/4/15'),

    };

  };

 

Please get back to us if you need further assistance.

 

Regards,

Sridharan