We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Date localization not working

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",

1 Reply

PS Pavithra Subramaniyam Syncfusion Team November 23, 2022 07:30 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon