[REACT] DateTimeField editor on Column

[abbeyng]

Hi,
I tried to use DateTimeField editor in Gantt Column outside of currently supported column types ( such as StartDateColumn, BaselineStartDateColumn, ...).

{ 
            type    : 'date', 
            text    : 'Custom Date',
            field   : 'customDate',
            editor  : 'datetimefield',
            format  : 'MM/DD/YYYY HH:mm:ss A',
 },

It was able to display the format correctly with string input "03/14/2024 12:00:00 PM". But the moment I double click to edit the cell, I got error:

first.getTime is not a function
TypeError: first.getTime is not a function
    at _DateHelper.isEqual (http://localhost:3000/static/js/bundle.js:63631:39)
    at DateTimeField.hasChanged (http://localhost:3000/static/js/bundle.js:127282:24)
    at DateTimeField.changeValue (http://localhost:3000/static/js/bundle.js:118874:14)
    at DateTimeField.set (http://localhost:3000/static/js/bundle.js:57107:44)
    at DateTimeField.setValue (http://localhost:3000/static/js/bundle.js:118868:16)
    at Editor.startEdit (http://localhost:3000/static/js/bundle.js:127915:26)
    at CellEdit3.startEditing (http://localhost:3000/static/js/bundle.js:141421:26)
    at async CellEdit3.startEditing (http://localhost:3000/static/js/bundle.js:236181:16)
    at async CellEdit3.onTriggerEditEvent (http://localhost:3000/static/js/bundle.js:141603:5)
    at async Promise.all (index 0)

How do I fix this issue?

[marcio]

Hey abbeyng,

Thanks for reaching out and welcome to our forums!

Are you able to reproduce that in one of our demos? I tried to reproduce on our demo https://bryntum.com/products/gantt/examples/advanced/

But it worked without any errors in the console. I attached a video of how I tried to reproduce, could you confirm that I'm trying to reproduce correctly?

If you couldn't reproduce it on our demo, can you share a small test case with your configuration and the behavior you're describing? You can get more info by checking out the guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772

[abbeyng]

Hi marcio,

Thank you for your quick response.

I tried project from "examples\frameworks\react\javascript\advanced" and I couldn't see the issue. But when I tried from "examples\frameworks\react\javascript\inline-data", I saw a similar error to mine [see video in attachment]

My project setup is similar to inline-data, and I wonder if it's the issue?

I added code below to tasks in initialData.js

customDate : '03/14/2023 12:00:00 PM',

[sergey.maltsev]

Hi, abbeyng!

Thank you for the additional information.
I was able to reproduce this error.
This is the issue for the fix
https://github.com/bryntum/support/issues/8815

Please subscribe to it get updates.

[sergey.maltsev]

One more addition to your code.

To make this work please consider declaring customDate field with a proper date type.

class AppTaskModel extends TaskModel {
    static get fields() {
        return [{ name: 'customDate', type: 'date' }];
    }
}

then you may configure Project with taskModelClass

export const projectConfig = {
    calendar     : 'general',
    startDate,
    hoursPerDay  : 24,
    daysPerWeek  : 5,
    daysPerMonth : 20,
    taskModelClass: AppTaskModel
};

React-Inline-Data.png (55.67 KiB) Viewed 155 times

[abbeyng]

Hi sergey.maltsev,

Thank you for your response. I'm glad it's a quick bug to fix and will be in the next patch.

Just to make sure I understand this correctly, I need both the fix and the additional code to make this to work, right?

I tried the addition code in "inline-data" project, editing didn't give me error anymore but it didn't show the customDate I put in inlineData.js either.

And do you know when 5.6.9 will be released?

[sergey.maltsev]

Hi!

It is a fix for unhandled exceptions.
But you still need to configure application as I mentioned above.
This won't work without a fix in application code even in 5.6.9.

Custom date in data should be in format like '2024-02-01T10:00:00'
If it has another format then you should configure field accordingly.

https://bryntum.com/products/scheduler/docs/api/Core/data/field/DateDataField#config-format

TL;DR Please use may previous post to fix that. It will work in current version.