Date localization not working

[GUU]

Hello,

I am trying to enable the date filtering in the Grid component. Because the formats of the dates are not in en-US we need to format the dates so users can enter the relevant information into the filter.

Upon trying to use the following code to load the locale:

import {loadCldr, setCulture} from '@syncfusion/ej2-base'

import * as numbers from './locale/numbers.json';

import * as timeZoneNames from './locale/timeZoneNames.json';

import * as cagregorian from './locale/ca-gregorian.json';

import * as currencies from './locale/currencies.json';

import * as dateFields from './locale/dateFields.json';

loadCldr(currencies, cagregorian, numbers, timeZoneNames, dateFields)

setCulture('en-AU') //set the culture

The locale folder got copied from the installed folder from cldr-data. 

The grid component is initialized like this:

<GridComponent

                id="grid"

                gridLines={'Both'}

                ref={g => (this.grid = g)}

                dataSource={this.props.data}

                allowFiltering={this.props.allowFiltering}

                filterSettings={{type: 'Menu'}}

                allowSorting={this.props.allowSorting}

                allowPdfExport={this.props.allowPdfExport}

                allowExcelExport={this.props.allowExcelExport}

                showColumnChooser={true}

                showColumnMenu={this.props.showColumnMenu}

                toolbar={['PdfExport', 'ExcelExport']}

                toolbarClick={this.toolbarClick}

                height={this.props.height}

                allowTextWrap={true}

                allowResizeToFit={true}

                allowGrouping={this.props.allowGrouping}

                allowMultiSorting={true}

                enableVirtualization={true}

                pageSettings={{pageSize: 50}}

                locale="en-AU"

            >

Everything displays as it corresponds, but there is an error thrown in the console when the Calendar Icon button is clicked on a column of type Date:

The error is:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at CalendarBase.getCultureValues (calendar.js:284:1)
    at CalendarBase.createContentHeader (calendar.js:320:1)
    at CalendarBase.createContent (calendar.js:268:1)
    at Calendar.createContent (calendar.js:2199:1)
    at CalendarBase.render (calendar.js:140:1)
    at Calendar.render (calendar.js:2055:1)
    at DatePicker.show (datepicker.js:1183:1)
    at DatePicker.dateIconHandler (datepicker.js:557:1)
-------------------------------------------------------------
    CalendarBase.prototype.getCultureValues = function () {
        var culShortNames = [];
        var cldrObj;
        var dayFormat = 'days.stand-alone.' + this.dayHeaderFormat.toLowerCase();
        if (this.locale === 'en' || this.locale === 'en-US') {
            cldrObj = (getValue(dayFormat, getDefaultDateObject()));
        }
        else {
            cldrObj = (this.getCultureObjects(cldrData, '' + this.locale));
        }
        for (var _i = 0, _a = Object.keys(cldrObj); _i < _a.length; _i++) {
            var obj = _a[_i];
            culShortNames.push(getValue(obj, cldrObj));
        }
        return culShortNames;
    };

Could you please let me know what is it that I am missing?

The libraries versions used are:

    "@syncfusion/ej2-react-buttons": "^19.3.56",

    "@syncfusion/ej2-react-calendars": "^19.3.56",

    "@syncfusion/ej2-react-charts": "^19.3.56",

    "@syncfusion/ej2-react-dropdowns": "^19.3.56",

    "@syncfusion/ej2-react-grids": "^19.4.56",

    "@syncfusion/ej2-react-heatmap": "^19.3.56",

    "@syncfusion/ej2-react-inputs": "^19.4.52",

    "@syncfusion/ej2-react-pivotview": "^19.3.56",

    "@syncfusion/ej2-react-querybuilder": "^19.4.56",

    "@syncfusion/ej2-react-richtexteditor": "^19.3.56",

    "@syncfusion/ej2-react-treegrid": "^19.4.56",

[Pavithra Subramaniyam]

Hi GUU,

The reported issue will occur only when we miss loading the culture files “ca-gregorian”, “numbers”, “timeZoneNames” while rendering Calendar components with locale. Please refer to the below documentation.

https://ej2.syncfusion.com/react/documentation/calendar/globalization/

From your code, we could see that you have loaded the corresponding files, but we could not reproduce on our end. So, could you please provide the below details which will be helpful for us to provide a better solution as early as possible?

1. Ensure that the json files are loaded properly.
2. Share an issue-reproducible sample which will be easier to validate the issue

Regards,

Pavithra S