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);
                value = null;
        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;
                    delete item.baselineStart;
                ganttChartView.onItemPropertyChanged(item, "baselineStart", true, true);
            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!


About DlhSoft Team

DlhSoft is a software development company focused on building high quality and innovative solutions using state-of-the-art technologies for customers worldwide. Our activity includes designing and developing general purpose software applications, components and tools, and customized software solutions upon request. DlhSoft team is highly experienced and fully dedicated to software development. Additionally, one of the most important things we rely on is the continuous communication with the customer.
This entry was posted in Development Components and tagged , , , , , , . Bookmark the permalink.

Add a reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s