Globalization of calendar in Grid's Filter
Hello,
I'm trying to use french language with the ejs-grid.
It was working fine until I tried to open the calendar in the Filter menu of an e-column.
When I'm clicking on this calendar I'm facing the following error:
Here's my code of my component :
Of course I'm setting the locale in the ngInit of the component:
And finally the e-column:
Can someone help me on this ?
I read and read gain the doc https://ej2.syncfusion.com/angular/documentation/calendar/globalization/ without understanding what I'm missing...
Thanks
SIGN IN To post a reply.
7 Replies
Hi Maxime,
Greetings from Syncfusion support.
We checked in our sample by applying locale to the menu filter but it is working fine at our end. We checked your code example and we suspect that you are calling the setCulture method with incorrect arguments.
So suggest you to apply the culture as expected format to resolve the issue.
Please refer the below code example and sample for documentation link for more information.
|
Given code example
 |
|
Expected
 |
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/global-local/#internationalization
Please let us know, if you need further assistance.
Regards,
Manivel
Hello Manivel,
I still have the issue.
I tried to setCulture of 'fr-FR' but I had another error:
Plus, in cldr-data package there is no 'fr-FR' directory and in json files.
I tried to follow the Sample by replacing all 'fr' by 'de', and all the grid is working !
I tried with 'es' and 'es-MX' and I had the same error I'm facing with 'fr'.
I do not understand why it's working with 'de' and not other languages.
I searched in my code if I had any special configuration for 'de' but I did not found anything (I never tried to make it work with 'de' before...), do you have any idea ?
More information:
I put some console log in ej2-calendar.es2015.js, before the date.valueOf() (Line 904) that is throwing the error.
The first date is the 30 August, it's not throwing any error, but globalize.parseDate is transforming 30 August in 30 September (+ 1month).
dateFormatOptions = {skeleton: "full", type: "dateTime", calendar: "gregorian"}
localDate = Sun Aug 30 2020 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
this.globalize.formatDate(localDate, dateFormatOptions) = dimanche 30 août 2020 à 00:00:00 UTC+02:00
this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions) = Wed Sep 30 2020 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
So I think it's the same problem for the second date, but 31 September is not existing, so it will failed:
dateFormatOptions = {skeleton: "full", type: "dateTime", calendar: "gregorian"}
localDate = Mon Aug 31 2020 00:00:00 GMT+0200 (heure d’été d’Europe centrale)
this.globalize.formatDate(localDate, dateFormatOptions) = lundi 31 août 2020 à 00:00:00 UTC+02:00
and finally of course : this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions) = null
With 'de' local, the parseDate not doing the + 1 month, and the timezone using GMT instead of UTC for 'fr' local.
Thanks
Hi Maxime,
Thanks for your update.
We have checked in our sample with ‘fr-FR’ culture but we did not face the mentioned issue at our end. For your convenience we have attached the sample and please find the sample from the below link
Screenshot:
In the above sample we have done the below changes to apply the “fr” culture.
1. Referred the locale json files(ca-gregorian, currencies, numbers and timeZones.json) in the loadCldr method.
2. Referred the locale text for “fr” culture through L10n.load method.
3. Applied the “fr” culture through setCulture method
|
import { Component, OnInit, ViewChild } from '@angular/core';
import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { Orderdata } from './data';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import * as cagregorian from "./ca-gregorian.json";
import * as currencies from "./currencies.json";
import * as numbers from "./numbers.json";
import * as timeZoneNames from "./timeZoneNames.json";
loadCldr(cagregorian, currencies, numbers, timeZoneNames); // load json files throught loadCldr method
const localede = {
'fr': {
"grid": {
"EmptyRecord": "Aucun enregistrement à afficher",
. . .
}
}
@Component({
selector: 'control-content',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
. . .
buttonClick(args) {
L10n.load(localede); // load corresponding culture text
setCulture('fr'); // Change the Grid culture
setCurrencyCode('EUR');// Change the currency code
}
} |
If you still faced the same issue, please share the below details which will be helpful for us to validate further about issue.
1. Please ensure that you have followed the above mentioned steps.
2. Share the complete Grid Rendering code.
3. Share the Syncfusion packages version.
4. If possible , please try to replicate the reported issue in the given sample or share issue reproducible sample.
Regards,
Manivel
SIGN IN To post a reply.
