Premium support for our pure JavaScript UI components


Post by mlaukkanen »

Hi,

I've previously followed your localisation guide to configure my Gantt but a couple of issues have come up that I need to resolve.

My implementation looks like this:

import De from '../locales/De.js'; // E.g. locale implemented based on your examples

...

const locale = 'de-CH'; // For example - comes from user profile and varies (DE, FR, CH, UK etc)
const dateFormat = {
	DateHelper: {
		locale
	},
};

De.locale.DateHelper.locale = locale; // 
LocaleManager.extendLocale('En', dateFormat);
LocaleManager.registerLocale('De', De);
...
  1. Some date columns are not formatted with the locale date format registered in the DateHelper & LocaleManager. Specifically all my standard columns are correct: Start, End and custom date columns. But Deadline, Early Start, etc (all those columns that can be added via "New Column") all show the wrong format.

  2. Typing in dates into the date field are parsed in US format!

I have "fixed" the parsing for some dates by making the below change to the above code:

...
const dateFormat = {
	DateHelper: {
		locale,
		parsers: {
			L: 'DD.MM.YYYY'
		}
	},
};
...

But I haven't found any documentation on that parsers property, and also it doesn't fix the 2nd case mentioned in my issue above: ie the Deadline, Early Start, etc fields still parse in US.

What am I missing?

Thanks,
Martin


Post by mlaukkanen »

Oh and I've also tried using:

DateHelper.defaultFormat = 'DD/MM/YYYY';
DateHelper.defaultParseFormat = 'DD/MM/YYYY';

Or whatever for the format but that seems to do nothing?

BTW. Running Gantt 4.2.2.


Post by Maxim Gorkovsky »

Hello.

Some date columns are not formatted with the locale date format registered in the DateHelper & LocaleManager

Date format in defined on the column level, please see this config: https://bryntum.com/docs/gantt/#Grid/column/DateColumn#config-format
Gantt date columns extend this class: https://bryntum.com/docs/gantt/#Gantt/column/GanttDateColumn Which uses the ll as default date format. Which, for our default english locale looks like Jan 23, 2017
That locale uses browser localization tools, more specifically - new Intl.DateTimeFormat. See more in this doc: https://bryntum.com/docs/gantt/#Core/helper/DateHelper

Typing in dates into the date field are parsed in US format

Not all date formats could be parsed from the input. See this doc article for supported parsers: https://bryntum.com/docs/gantt/#Core/helper/DateHelper#parsing-strings
As you can see only L and LT are mentioned, and those are also declared in the locales. Formats like ll cannot be parsed from user input. We outsource that job to the new Date() constructor.

If you customize column date format to use units supported by parser, then user input could be processed.


Post by mlaukkanen »

Hi,
Thanks for the reply. I have implemented the formatting based on this guide: https://www.bryntum.com/docs/gantt/#Gantt/guides/customization/localization.md#change-date-formats

As I said it works perfectly for all of my "main" fields, e.g.: Start, End, My Custom Date Column etc. But not for the fields from the New Column.

Those columns are using the "ll" format you mentioned so yes those other columns (e.g. Deadline) do show like "Jan, 23 2017".

What I have tried to do for those fields is to add them to my model Fields configuration, when I do that they will use the correct format - even if I don't specify 'format'. That's exactly the same as my "main" fields Start, etc.

However I want to use the New Column to add those columns only when needed, but how do I format those without specifying them in my initial Gantt.columns config?

Thanks,
Martin


Post by Maxim Gorkovsky »

You can try to change date format as you add column to the panel:

gantt.columns.on({
    // need to listen to change event to give column some time to render
    change({ action, records }) {
        if (action === 'add') {
            records.forEach(column => {
                if (column.isGanttDateColumn) {
                    column.format = 'L';
                }
            });
        }
    }
});

Post by mlaukkanen »

Great thanks, that has fixed my issue!


Post Reply