Formatting dates on custom date columns with Gantt Chart Hyper Library

If you try to combine our Custom columns sample app for Gantt Chart Hyper Library – specifically, the baseline start and finish columns –  with Custom date formatters (or you simply want to define custom date-time fields on your items and then display and allow editing their value using specifically added columns), you might find out that the dates are not formatted as you would expect (as the main start and finish dates are.)

To resolve this issue you can use a workaround, though. You need to define a custom date input template that does format the value using settings.dateTimeFormatter (and reads values from the associated input element using dateTimeParser too), and then map it to baselineStart and baselineFinish (or any other custom date-time) fields as follows:

function formattedDateTimeInputColumnTemplateBase(document, width, valueGetter, valueSetter, isEnabledGetter, isVisibleGetter, isBoldGetter) {
    return DlhSoft.Controls.GanttChartView.textInputColumnTemplateBase(document, width,
        function () {
            var value = valueGetter();
            if (value != null)
                return settings.dateTimeFormatter(value);
            return "";
        },
        function (value) {
            if (value != "")
                value = DlhSoft.Controls.GanttChartView.dateTimeParser(value);
            else
                value = null;
            valueSetter(value);
        },
        isEnabledGetter, isVisibleGetter, isBoldGetter
    );
};
function formattedBaselineStartColumnTemplate(inputWidth) {
    return function (item) {
        var ganttChartView = item.ganttChartView, document = ganttChartView.ownerDocument;
        return formattedDateTimeInputColumnTemplateBase(document, inputWidth,
            function () {
                return item.baselineStart;
            },
            function (value) {
                if (value != null)
                    item.baselineStart = value;
                else
                    delete item.baselineStart;
                ganttChartView.onItemPropertyChanged(item, "baselineStart", true, true);
                ganttChartView.refreshItem(item);
            },
            function () { return !(item.isReadOnly || (typeof item.ganttChartView !== "undefined" && typeof item.ganttChartView.settings !== "undefined" && (item.ganttChartView.settings.isReadOnly || item.ganttChartView.settings.isGridReadOnly))); },
            function () { return !(typeof item.isBarVisible !== "undefined" && !item.isBarVisible); },
            function () { return (item.hasChildren && (typeof item.isSummaryEnabled === "undefined" || item.isSummaryEnabled)); }
        );
    }
};
function formattedBaselineFinishColumnTemplate(inputWidth) {
    ...
};

// cellTemplate fields use the functions declared above:
columns.push({ header: 'Plan Start', width: 140, cellTemplate: formattedBaselineStartColumnTemplate(124) });
columns.push({ header: 'Plan End', width: 140, cellTemplate: formattedBaselineFinishColumnTemplate(124) });

We hope it helps. Enjoy!

Advertisement