Angular Grid Datetime Filter Doesn't Work

[Artur Junior]

I'm having an issue with the DateTime filter in the grid component. It throw the following error:

core.js:5973 ERROR TypeError: Cannot convert undefined or null to object

    at Function.keys ()

    at DateTimePicker.getCultureValues (ej2-calendars.es2015.js:263)

    at DateTimePicker.createContentHeader (ej2-calendars.es2015.js:298)

    at DateTimePicker.createContent (ej2-calendars.es2015.js:247)

    at DateTimePicker.createContent (ej2-calendars.es2015.js:2092)

    at DateTimePicker.render (ej2-calendars.es2015.js:119)

    at DateTimePicker.render (ej2-calendars.es2015.js:1976)

    at DateTimePicker.disabledDates (ej2-calendars.es2015.js:4460)

    at DateTimePicker.updateInput (ej2-calendars.es2015.js:3089)

    at DateTimePicker.onPropertyChanged (ej2-calendars.es2015.js:12742)

[Praveenkumar Gajendiran]

Hi Artur, 

Thanks for contacting Syncfusion support. 

Based on your shared information we have checked and confirmed that while changing English language to another language, your reported issue may occurs you missed to load required datatimepicker’s specific culture json in your application. So, to overcome this issue we suggest to follow the below steps. 

By default, DateTimePicker date format, week and month names are specific to English culture. It utilizes the Essential JavaScript 2 Internationalization package to parse and format the date object based on the culture by using the official UNICODE CLDR JSON data. It provides the loadCldr method to load culture specific CLDR JSON data. To use a different culture other than English, follow the steps below: 

• Install the CLDR-Data package by using the following command (installs all the CLDR JSON data). To know more about CLDR-Data refer to the CLDR-Data link.

      

npm install cldr-data –save 

Once the package installed, you can find the culture specific JSON data under the location \node_modules\cldr-data. 

• Now import the installed CLDR JSON data into the app.component.ts file.
• Now use the loadCldr method to load the culture specific CLDR JSON data from the installed location to app.component.ts file.
• Then the culture(‘de’) needs to be set for the EJ2 controls using the EJ2 base’s setCulture method

import { L10n, setCulture, loadCldr } from "@syncfusion/ej2-base"; 

import * as numberingSystems from "./numberingSystems.json"; 

import * as gregorian from "./ca-gregorian.json"; 

import * as numbers from "./numbers.json"; 

import * as detimeZoneNames from "./timeZoneNames.json"; 

 

loadCldr(numberingSystems, gregorian, numbers, detimeZoneNames); 

 

setCulture('de'); 

 

 

You can also localize the default text content of the Grid by loading the translation texts for the German culture from the “@syncfusion/ej2-locale” package by using the base’s L10n load function. This is demonstrated in the below code snippet, 

import { L10n } from '@syncfusion/ej2-base'; 

 

L10n.load(require('@syncfusion/ej2-locale/src/de.json')); 

NPM package: https://www.npmjs.com/package/@syncfusion/ej2-locale 

List of locale texts for different cultures which can be loaded for the EJ2 controls can be checked in the below link, 

 

Locale texts: https://github.com/syncfusion/ej2-locale/tree/master/src   

 

L10n.load({ 

  de: { 

    datetimepicker: { 

      today: "heute" 

    } 

  } 

}); 

 

Using this above steps we have prepared sample for de culture . Please refer to the below sample and screenshot for more reference. 

Sample link :  https://stackblitz.com/edit/angular-ceqiku-veephe?file=app.component.html  

Documentation link : https://ej2.syncfusion.com/angular/documentation/datetimepicker/globalization/
                                       https://ej2.syncfusion.com/angular/documentation/grid/global-local/ 

Likewise you can change your language as per you want. 

Still if have facing any issue, please get back to us with the below information that will be helpful to validate further on this,  

1)                 Syncfusion package version used. 

2)                 Complete grid rendering code. 

3)                 Please let us know the locale you have used. 

4)                 If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. 

Please get back to us, if you need any further assistance. 

Regards, 

Praveenkumar G 

[Artur Junior]

Thanks a lot!

I already had clrd, but weren't properly loaded.

How is working:

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

import * as currencies from 'cldr-data/main/pt/currencies.json';

import * as numbers from 'cldr-data/main/pt/numbers.json';

import * as gregorian from 'cldr-data/main/pt/ca-gregorian.json';

import * as detimeZoneNames from 'cldr-data/main/pt/timeZoneNames.json';

import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';

import * as ej2l10 from '@syncfusion/ej2-locale/src/pt.json';

loadCldr(

  numberingSystems['default'],

  gregorian['default'],

  numbers['default'],

  detimeZoneNames['default'],

  currencies['default']

);

setCulture('pt');

L10n.load(ej2l10['default']);

[Praveenkumar Gajendiran]

Hi Artur, 

Thanks for your update.

The reported issue would be resolved by loading the CLDR JSON files properly in the Grid.

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G