Date format in Grid

[Unknown]

Hello,

how can I set date format by locale in grid cell? I set locale property to grid that I need, but I always get same date format.

In Essential JS1 I was using grid method templateRefresh but I can not see it in Essential JS2 version.

Also, is there a possibility to get everything in application by user locale which can be changed dynamically? I found example here (https://www.syncfusion.com/forums/136241/get-data-format-and-calendar-by-locale) but it works only with Essential JS1 version.

[Rahul Narayanasamy]

Hi AC, 

 

Thanks for contacting Syncfusion support. 

 

Query : how can I set date format by locale in grid cell? I set locale property to grid that I need, but I always get same date format. 

 

We suspect that you are not including the CLDR data for corresponding locale properly. You need to add CLDR data using loadCldr. Please find the below code example for your reference.  

 

loadCldr(currencies, cagregorian, numberLocale, timeZoneNames, numberingSystems); 

 

setCulture('de'); 

setCurrencyCode('EUR'); 

 

@Component({ 

    selector: 'my-app', 

    template: `<ejs-grid id='Grid' [dataSource]='data' [allowPaging]='true' [allowGrouping]='true' [locale]='de-DE' height='315px'> 

                <e-columns> 

                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column> 

                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column> 

                    <e-column field='Freight' headerText='Freight' [format]='formatOptions' textAlign='Right' width=150></e-column> 

                    <e-column field='OrderDate' headerText='Order Date' type='date' format='yMd' width=150 ></e-column> 

                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column> 

                </e-columns> 

               </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

 

    public data: Object[]; 

    public formatOptions: Object; 

 

    ngOnInit(): void { 

        this.data = data; 

        this.formatOptions = { format:'N2' } 

    } 

} 

 

Query 2:  Is there a possibility to get everything in application by user locale which can be changed dynamically? 

 

Can you please provide more information about the term “everything”. It will be more helpful to validate further. 

 

Please find below sample for your reference. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/localeDate-295155230 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rahul Narayanasamy. 

[Unknown]

Hello,

there are another problem by doing it with format datetime. I want to show dateTime column by locale, but I am always get same format. I am trying to do it like with type date but I was not able to see what I want. I want to see data by format 'dMy Hms' by selected locale.

I tried to do it like (no one was working):

1. type: 'date', format: 'yMdHms'

2. type: 'date', format: 'yMd Hms'

3. type: 'dateTime', format: 'yMdHms'

4. type: 'dateTime', format: 'yMd Hms'

5. format: { type: 'dateTime', format: 'yMd Hms' } - this displays my data something like by locale but without any characters between number so I see my date and time for example like 202022 151515 instead of 2020-02-02 15:15:15 (or by another locale see same result instead of 02.02.2020 15:15:15)

[Madhu Sudhanan P]

Hi AC, 

 

Query: format: { type: 'dateTime', format: 'yMd Hms' } - this displays my data something like by locale but without any characters between number so I see my date and time for example like 202022 151515 instead of 2020-02-02 15:15:15 (or by another locale see same result instead of 02.02.2020 15:15:15) 

 

By default we can modify your date format in your required format like 02.02.2020 15:15:15 by using the custom date format as {type: 'date', format:'dd/MM/yyyy hh:mm:ss a'}. If we used custom format then the separator in the date cannot be changed as per locale. You can achieve your requirement in the following ways. 

 

By using date format skeleton. Please find the below code example for your reference. 

 

[code example] 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' height='350'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' [format]="{type: 'date', format:'dd/MM/yyyy hh:mm:ss a'}" textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

            <e-column field='ShippedDate' headerText='Shipped Date' width='130' [format]="{type: 'dateTime', skeleton: 'short'}" textAlign='Right'></e-column> 

            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

 

Sample link: https://stackblitz.com/edit/angular-ufcgj2-jnzhc4?file=default.html  

 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/?no-cache=1#date-formatting  

 

Please get back to us if you need further assistance. 

 

Regards, 

Madhu Sudhanan P

[Unknown]

Hello,

one more question - how i need to set locale for that fields? Because now for type date my grid locale property works, but using custom format with skeleton my date time did not changed by locale.

I am adding locale like this: https://stackblitz.com/edit/angular-ufcgj2-vmrjh2?file=default.component.ts (loadCldr in app.module file)

[Madhu Sudhanan P]

Hi AC, 

We have analyzed further at our end and it is not possible to change the date separator as per the locale when using the custom format. However we can do manual formatting at the grid cell events by getting the current locale date separator. Could you please confirm whether, it is ok for you to achieve this by doing manual formatting at the grid cell events? And we will provide sample based on that. 

Regards, 

Madhu Sudhanan P 

Hi AC, 

We have analyzed further at our end and it is not possible to change the date separator as per the locale when using the custom format. However we can do manual formatting at the grid cell events by getting the current locale date separator. Could you please confirm whether, it is ok for you to achieve this by doing manual formatting at the grid cell events? And we will provide sample based on that. 

Regards, 

Madhu Sudhanan P 

 

[Unknown]

Hello,

is there no possibility to do it automatically, than it would be perfect if you could sent sample how to do it manually.

[Thavasianand Sankaranarayanan]

Hi AC, 

 

Query: is there no possibility to do it automatically, than it would be perfect if you could sent sample how to do it manually. 

 

As per your requirement, we have prepared a sample based on your requirement. Please find the below code example and sample for your reference. 

 

[code example] 

... 

 

@Component({ 

    selector: 'control-content', 

    templateUrl: 'default.html' 

}) 

export class DefaultComponent implements OnInit { 

    public data: Object[] = []; 

    @ViewChild('grid') 

    public grid: GridComponent; 

 

    ngOnInit(): void { 

        this.data = orderDatas; 

    } 

    public valueAccess = (field: string, data: Object, column: Object) => { 

      debugger 

      let intl: Internationalization = new Internationalization(); 

      var val = intl.getDateFormat({ type: 'dateTime', format: 'dd-MM-yyyy hh:mm:ss'})(new Date); 

      var seperator = (getValue('main.es.dates.calendars.gregorian.dateFormats.short.1',cagregorian) || ""); 

      return val.split('-').join(seperator); 

    } 

} 

 

Sample link: https://stackblitz.com/edit/angular-wtifyf-s43dmy?file=default.component.ts  

 

Please get back to us if you need further assistance. 

 

Regards, 

Thavasianand S.