Devextreme: dxDateBox ignores Globalize localization

[JuFrolov]

Steps to Reproduce:

1. Follow your localization guide for the version above 17.
2. Specify a language other than English.

Results You Received:

The locale is always the same. (But the messages on this control correspond to the selected locale.)

DevExtreme/js/localization/date.js 68 line and 604 line

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];```

/*.................*/

    getMonthNames: function(format) {
        return cutCaptions(months, format);
    },

    getDayNames: function(format) {
        return cutCaptions(days, format);
    },

Assumption:
There are no places where the values ​​of these variables change, or other places to which the reference occurs when forming the component.

Results You Expected:

The names of the weeks of the months should be in accordance with the specified locale

Environment Details:

17.1.3 DevExtreme

[nightskylark]

Hi
It looks like the DevExtreme Globalize integration is not included in your application. The code you inserted above is a part of the base localization which works without Globalize, but its functionality is limited, so dates can be formatted only in the English locale. Please read our documentation about the Globalize integration modules.

[JuFrolov]

Globalize is integrated into the application. All inscriptions at the notification are translated, except for these 2 objects. For example, after trying to open dxDateBox in debugging on:

            _getPopupTitle: function() {
                var placeholder = this.option("placeholder");
                if (placeholder) {
                    return placeholder
                }
                var type = this.option("type");
                if (type === TYPE.time) {
                    return messageLocalization.format("dxDateBox-simulatedDataPickerTitleTime")
                }
                if (type === TYPE.date || type === TYPE.datetime) {
                    return messageLocalization.format("dxDateBox-simulatedDataPickerTitleDate")
                }
                return ""
            }

I get:
"Выберите дату"
and
"Выберите время"

And then I get into the above lines.
DevExtreme/js/localization/date.js 68 line and 604 line
They take hard data.

Note: The date localization in PivotGrid DateGrid and Chart is works posted on the same page.

And in the code there are methods in which the localization seems to happen, but this component does not involve them in any way.

                getMonthNames: function(format) {
                    var months = Globalize.locale().main("dates/calendars/gregorian/months/stand-alone/" + (format || "wide"));
                    return $.map(months, function(month) {
                        return month
                    })
                },
                getDayNames: function(format) {
                    var days = Globalize.locale().main("dates/calendars/gregorian/days/stand-alone/" + (format || "wide"));
                    return $.map(days, function(day) {
                        return day
                    })
                }

My initialization.

define('***', [
        'jquery',    
        'devextreme',
        'globalize',
        'p/localization',
        'devextreme/dx.messages.ru'
    ],
    function(
        $,
        devextreme,
        Globalize,
        Localization
    ) {

 $.when(
                $.getJSON("/js/cldr-data/main/" + Localization.local() + "/ca-gregorian.json"),
                $.getJSON("/js/cldr-data/main/" + Localization.local() + "/numbers.json"),
                $.getJSON("/js/cldr-data/main/" + Localization.local() + "/currencies.json"),
                $.getJSON("/js/cldr-data/main/" + Localization.local() + "/timeZoneNames.json"),
                $.getJSON("/js/cldr-data/supplemental/likelySubtags.json"),
                $.getJSON("/js/cldr-data/supplemental/metaZones.json"),
                $.getJSON("/js/cldr-data/supplemental/timeData.json"),
                $.getJSON("/js/cldr-data/supplemental/weekData.json"),
                $.getJSON("/js/cldr-data/supplemental/currencyData.json"),
                $.getJSON("/js/cldr-data/supplemental/numberingSystems.json"),
                $.getJSON("/js/cldr-data/supplemental/plurals.json"),
                $.getJSON("/js/cldr-data/supplemental/ordinals.json"),
                $.getJSON("/js/cldr-data/main/" + Localization.local() + "/dateFields.json"),
                $.getJSON("/js/cldr-data/main/" + Localization.local() + "/units.json")
            )
            .then(function() {
                return [].slice.apply(arguments, [0]).map(function(result) {
                    return result[0];
                });
            }).then(
                Globalize.load
            ).then(function() {
                Globalize.locale(Localization.local());
                window.DevExpress.localization.locale(Localization.local());
                window.DevExpress.config({ defaultCurrency: 'RUB', forceIsoDateParsing: false });
            }).then(function() {
                //...
            });

for requirejs init file:

/******/
shim: {
        'cldr/event': {
            deps: ['cldr']
        },
        'cldr/supplemental': {
            deps: ['cldr', 'cldr/event']
        },
        globalize: {
            deps: ['cldr', 'cldr/event', 'cldr/supplemental'],
            exports: 'Globalize'
        },
        'globalize/message': {
            deps: ['jquery', 'globalize']
        },
        'globalize/number': {
            deps: ['jquery', 'globalize', 'globalize/message']
        },
        'globalize/plural': {
            deps: ['jquery', 'globalize', 'globalize/date']
        },
        'globalize/date': {
            deps: ['jquery', 'globalize', 'globalize/currency']
        },
        'globalize/currency': {
            deps: ['jquery', 'globalize', 'globalize/number']
        },
        'globalize/relative-time': {
            deps: ['jquery', 'globalize', 'globalize/date']
        },
        'globalize/unit': {
            deps: ['jquery', 'globalize', 'globalize/date']
        },
        devextreme: {
            deps: ['jquery', 'globalize', 'globalize/message', 'globalize/number', 'globalize/currency', 'globalize/date', 'globalize/plural', 'globalize/relative-time', 'globalize/unit', 'jszip']
        },
        'dx.messages.ru': {
            deps: ['devextreme']
        }
    }

Please note that your support did not give answers to this problem on new versions (17), but only referred to examples for version 16.1.

[artem-kurchenko]

Hi,

Thanks for your code. However, I still don't see where you referenced our DevExtreme globalize modules
To display month names and week days according to the current culture, you need to define the "/localization/globalize/date" module in your application.

We have Globalize examples for version 17.1 in the DevExtreme-Examples repository. For more detailed assistance, feel free to contact us in our Support Center. We'll be happy to help.

[JuFrolov]

Hi,
It is obvious that they are contained in dx.all.js
And the only thing that is in the folder localization - dx.messages.ru.js as you see connected.

Total:

• DevExtreme fully compiled library is connected.
• Message.js is also connected.
  No more files, or are they missing in the dist folder or is it not a full-fledged library?

[artem-kurchenko]

Thanks for the update. You're right, they are inside dx.all.js. However, it's not correct to reference this bundle in this case. Now, the DevExpress and Globalize objects are defined in different scopes (DevExpress at the window level and Globalize only inside the RequireJS function).
You need to convert DevExtreme modules to the AMD format before using them with RequireJS. Please refer to the Use RequireJS help topic for more information.

[JuFrolov]

Maybe I misunderstood you. But do not explain to me how the Globalize library is incorrectly connected, if all the components are localized except for the specified one? The component does not access Globalize at all or objects, such as those associated with it.
Other components that check the localization at the time of rendering, easily get the Globalize library with translation.
P.S. help topic contains errors.

[artem-kurchenko]

Translations are applied as a part of the code executed in the dx.messages.ru.js file. If you're using this file, it calls the loadMessages method with all translation texts. Then the window.DevExpress.localization.locale code applies the current locale. This logic should work even if the Globalize.locale method is not called.
 
I've created an example to be more precise. The index.html page illustrates how the RequireJS library can be used to load our modules and Globalize. The index2.html page loads the whole bundle and illustrates the behavior you likely see on your side. If your idea is different, feel free to modify the example and post it here for further research.
requirejs-jquery.zip

[JuFrolov]

Hi,
Your example index2 wrong. In the dist is a very special dx.message.js the file, why you use json the file, which is absent? That's why your second example can not localize components.

So I modified your example, because I use. And he is all but component dxDateBox.

Judging from your example, 2, you could say that the folder dist is not complete.

requirejs-jquery-dx.all.zip

[artem-kurchenko]

Hi,
 
Thanks for the example. The attached example still loads the full dx.all bundle via RequireJS. This approach is not supported. If you're using RequireJS, load modules separately as demonstrated in the index.html page of my previous example. If you wish to use dx.all, don't load it via RequireJS.