[ANSWERED] How to use time part of startDate and endDate in task editor

[Jerther]

Hi!

We need to make use of the hours part of the startDate and endDate fields. While it clearly works out of the box when loading data (say, a task ending at noon will also have its bar end midway in the corresponding date column), the time part of those two fields is not shown in the editor.

This looked like a simple matter at first and I've been able to show a time value in the widget, but it is always midnight. Here, the task ends at noon:



But the widget still shows midnight:



And changing the time value there does not update the task.

Here's the code I used:

new Gantt({
    adopt : document.body,

    project : project,

    columns : [
        { type : 'name', field : 'name', width : 250 }
    ],

    listeners : {
        beforeTaskEditShow({ taskEdit, editor }) {
            if (!editor.initializedCustomFields) {
                editor.widgetMap.startDateField.format = "MM/DD/YYYY HH:mm";
                editor.widgetMap.startDateField.keepTime = true;
                editor.widgetMap.endDateField.format = "MM/DD/YYYY HH:mm";
                editor.widgetMap.endDateField.keepTime = true;
                editor.initializedCustomFields = true;
            }
        }
    },
});

I've looked into localization but there's two separate parsers for date and time, and making a separate localization just for this while we don't actually need localization makes me think it's not the way to go. Right?

Any advice?

[sergey.maltsev]

Hi!

Unfortunately we have no this option built-in yet for TaskEdit feature.
I've created this feature request
https://github.com/bryntum/support/issues/579

To do it yourself you have to reconfigure TaskEdit and add your own time fields to be shown/processed there.
Docs : https://www.bryntum.com/docs/gantt/#Gantt/feature/TaskEdit
Demo : https://www.bryntum.com/examples/gantt/taskeditor/

We're also available for Professional Services: https://www.bryntum.com/services.

[Jerther]

Oh, https://www.bryntum.com/docs/gantt/#Core/widget/TimeField, neat!

So I just added two time fields items in the general tab, both on their respective startDate and endDate fields, and everything works fine! Thanks for the tip!

new Gantt({
    adopt : document.body,

    project : project,

    columns : [
        { type : 'name', field : 'name', width : 250 }
    ],

    features: {
        taskEdit: {
            editorConfig: {
                extraItems: {
                    generaltab: [
                        {
                            html    : '',
                            dataset : {
                                text : 'Custom fields'
                            },
                            cls  : 'b-divider',
                            flex : '1 0 100%'
                        }, {
                            type: 'time',
                            label: 'Start time',
                            name: 'startDate',
                            ref: 'startDateTimeField',
                            flex: '1 0 50%',
                            cls   : 'b-inline',
                            onChange({ source : time, value, userAction, valid }) {
                                if(userAction && valid) {
                                    const h = value.getHours();
                                    const m = value.getMinutes();
                                    value.setTime(time.parent.record.startDate);
                                    value.setHours(h);
                                    value.setMinutes(m);
                                }
                            }
                        }, {
                            type: 'time',
                            label: 'End time',
                            name: 'endDate',
                            ref: 'endDateTimeField',
                            flex: '1 0 50%',
                            cls   : 'b-inline',
                            onChange({ source : time, value, userAction, valid }) {
                                if(userAction && valid) {
                                    const h = value.getHours();
                                    const m = value.getMinutes();
                                    value.setTime(time.parent.record.endDate);
                                    value.setHours(h);
                                    value.setMinutes(m);
                                }
                            }
                        }
                    ]
                }
            }
        }
    },

Now I'd like to position the fields just under the startDate and endDate fields. I know about the "weight" config on the fields, but AFAIK the built-in fields in the task editor are all at weight 0 so I can only position the new fields before (using a negative weight) or after the built-in ones. Can the fields be rearranged (and also hidden while we're at it) like the contextMenu items can?

EDIT: The TimeField sets the date to something in 1970 so I added some onChange handlers to keep the original value and just change the time part.

[gregc]

One thing I noted is that the gantt sends back startdate if you edit direct into the cell and startDate if you use the Task information. I can work around it, but worth noting. thanks for this code, it was a lifesaver.

[Jerther]

I'm glad I could help

For reference, could you tell what version you're using?

[gregc]

gantt-4.1.0-beta-2

[gregc]

After playing around with this for a few hours, I just don't find the gantt with times as viable out the box. I'm going to have to discard 1/2 the functionality, create my own Task Information form, create only my own columns with date and time separated, and then work from there.

[pmiklashevich]

@gregc Please see here: viewtopic.php?p=81394#p81394
And here: viewtopic.php?p=82082#p82082
If you have a new question or something is not clear to you, please create a new thread, provide detailed info, and we will try to help you. Cheers!

[gregc]

hmm, would be nice to have a datetime working on the examples page, there are just too many threads that have lead me down a path of no return.

update: [resolved in viewtopic.php?f=43&t=16697]