Date Format Time Zone

[Scott Price]

Hello,

I have a column with this this format:

this.dateFormat = {type: 'dateTime', format:'y/M/d h:m z'};

and it produces this output: "2021/8/12 11:41 GMT-5". How do I get the GMT-5 to show the friendly timezone string instead? I had the locale property set to 'en' for the grid, but that didn't seem to matter. (By friendly I mean something like "CST" "UTC" etc...)

Thanks,

Scott

[Praveenkumar Gajendiran]

Hi Scott, 

Thanks for contacting Syncfusion support.

Based on your query we would like to let you know that by default, the Grid component will automatically convert the dateTime value to new Date(), while converting the dateTime value to new Date(), that value will be converted based on your local machine timeZone culture with UTC format. This is its default behavior.

Based on your query we understand that you want to stop the time zone conversion in the EJ2 Grid. By default,  the Grid component will automatically convert the dateTime value(which is serialized and sent from server) to new Date(), while converting the dateTime value to new Date(), that value will be converted based on your local machine timeZone culture with UTC format.

If you want to stop the time zone conversion in the EJ2 Grid, we suggest you to set the DataUtil’s serverTimezoneOffset as 0  to avoid timeZone conversion and you can set serverTimezoneOffset as 0 using the beforeDataBound event.  

Please check the below Code Example for your reference, 

Code Example : 

Public flag = true;
beforeDataBound(args) { 

    if (this.flag) { 

      new DataUtil.serverTimezoneOffset = 0; 

      this.flag = false; 

    } 

  } 

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G 

[Scott Price]

I'll give that a shot but just to be clear, I'm OK with the timezone conversion happening...I just want the format of the date to include the localized version of a timezone (ie, 'UTC', 'CST', 'CDT' etc...) instead of just showing this: 'GMT-5' etc..

[Praveenkumar Gajendiran]

Hi Scott,

Thanks for your update. 

We checked your query, based on that we would like to let you know that by default, the Grid component will automatically convert the dateTime value to new Date() format, while converting the dateTime value to new Date(), that value will be converted based on your local machine timeZone culture. This converted value will be displayed in the Grid based on the format provided in that column with your local machine culture, if the format is not provided, we will display the converted value as same as in the Grid. This is its default behavior.

By default, we have set ‘en-us’ culture for the EJ2 controls, if you want to change the different culture based on your requirement, please follow the below steps for applying globalization.

For applying globalization you need to load the culture related files in your application. You can get these files by running the following npm 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 installed, load these files – ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames.json'] from the required culture(eg: German – ‘de’) present inside the main folder in your application using EJ2 base’s loadCldr method.  

Then the German culture(‘de’) needs to be set for the EJ2 controls using the EJ2 base’s setCulture method and the currency can also be set(if required) using its setCurrencyCode method. This is demonstrated in the below code snippet, 

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

 

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

loadCldr(cagregorian, currencies, numbers, timeZoneNames); 

 

setCulture('de'); 

setCurrencyCode('EUR'); 

 

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   

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

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

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

Likewise you can change your culture as per you want. 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G