1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Format Date in Grid

Format Date in Grid

How can i Format the date column in a Grid?

13 Replies
PS Pavithra Subramaniyam Syncfusion Team February 28, 2018 05:19 AM UTC

Hi Adrian, 

You can format the date column by using ‘column.format’ property of Essential JavaScript 2 Grid Component. Please refer to the sample code, Documentation link and sample link. 
 
[index.ts] 
let grid: Grid = new Grid({ 
    dataSource: data, 
    columns: [  
                { field: 'OrderDate', headerText: 'Order Date', , format: 'yMEd'  },   // output format: Thu, 7/4/1996 
                .     .     .                
    ], 
    height: 315 
}); 

grid.appendTo('#Grid'); 

Documentation : 

Sample               :  https://plnkr.co/edit/BebL5GlRsNKcsOaMmrj5?p=preview 

Regards, 
Pavithra S. 
       


AS Adrian Schafer February 28, 2018 11:55 AM UTC

How can i Format it in Locale Format like 24.12.1985 (de-DE)?


PS Pavithra Subramaniyam Syncfusion Team March 1, 2018 01:03 PM UTC

Hi Adrian, 
 
Query #1: How can i Format it in Locale Format like 24.12.1985 (de-DE)? 
 
Since de-De is the default content Locale for de , we have used [de] json files for de-DE culture. Please refer to the below reference link. So You can achieve your requirement by setting column.format property as ‘yMMdd’ for  German culture. Please refer to the following code example and sample link. Please refer to the code example and sample link. 

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

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

setCulture('de'); 

let grid: Grid = new Grid({ 
    columns: [ 
        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 
        { field: 'OrderDate', headerText: 'OrderDate', format:'yMMdd', width: 150 }, 
         
    ] 
}); 
grid.appendTo('#Grid'); 




Regards, 
Pavithra S. 


AS Adrian Schafer March 23, 2018 01:06 PM UTC

Thank you

Can you provide me a sample how to do the globalization generaly in asp.net core 2?

Regards,
Adrian

RS Renjith Singh Rajendran Syncfusion Team March 27, 2018 02:09 PM UTC

Hi Adrian, 

We have prepared a ASP.NET Core Globalization sample which could be downloaded from the link below, 

We have loaded the CLDR dependency files which we have referred in as necessary in our previous update by using an ajax and we have set the locale property of Grid with the corresponding localization value. Please refer the code example below, 

<ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" allowGrouping="true"> 
        ... 
</ejs-grid> 
 
<script>  
    function loadCultureFiles(name) {             
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
        ... 
       var loadCulture = function (prop) { 
            ... 
            if (name === 'ar' && prop === files.length - 1) { 
                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false); 
            } else { 
                ... 
            } 
            ... 
           loader(JSON.parse(val)); 
        }; 
        ... 
   } 
 
    document.addEventListener('DOMContentLoaded', function () { 
        debugger; 
        calendarObject = document.getElementById('Grid').ej2_instances[0]; 
        loadCultureFiles('de'); 
        calendarObject.locale = 'de'; 
    }); 
</script> 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


GW Gary Whiteside March 30, 2018 09:40 AM UTC

What would I need to do to get dates in UK format, ie dd/MM/yyyy 30/03/2018

RS Renjith Singh Rajendran Syncfusion Team April 3, 2018 01:13 PM UTC

Hi Gary, 

We suggest you to set the format and type for the particular date column inside the load event of Grid. Please refer the code example below, 

<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" load="load" allowPaging="true" allowGrouping="true"> 
       <e-grid-columns> 
            ... 
            <e-grid-column field="OrderDate" headerText="Order Date" width="170"></e-grid-column> 
            ... 
       </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function load(args) { 
        //Here OrderDate is the 3rd column 
        this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' }; 
    } 
</script> 

We have also prepared a sample based on your requirement which could be downloaded from the link below, 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


SC Saar Cohen August 16, 2018 11:03 PM UTC

Hi,

Seriously? It's 2018 not 1998 why can't we set UK date format without using JS?
Is that the only way to get dd-MM-yyyy?

MS Mani Sankar Durai Syncfusion Team August 17, 2018 12:30 PM UTC

Hi Saar, 
 
In Essential JavaScript 2 Grid, if you use the default CLDR data-time format then you can directly use the format string with ‘e-grid-column’ tag. In case you want to set the custom format then we need to use JavaScript to set the format as mentioned in our previous update. Please refer to the below code example and Documentation link. 
 
[index.cshtml] 
<div>  
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" load="load" allowPaging="true" >  
       <e-grid-columns>  
            ...  
            <e-grid-column field="OrderDate" headerText="Order Date" width="170"></e-grid-column>  
            ...  
       </e-grid-columns>  
    </ejs-grid>  
</div>  
  
<script>  
    function load(args) {  
        this.columns[3].format = { type: 'date', format: 'dd/MM/yyyy' };  
    }  
</script>  
 
 
 
Regards, 
Manisankar Durai. 



RC Richard Cook November 30, 2018 03:24 PM UTC

Hi

This JavaScript method of applying a format to a column on load doesn't work well with null values.  I'm getting null dates being converted to 01/01/1901.  How can I set it to treat a null as a null and not a date?

VA Venkatesh Ayothi Raman Syncfusion Team December 4, 2018 11:22 AM UTC

  
Hi Richard, 
 
Thanks for the update. 

We have tried to reproduce the issue at our end but its unsuccessful. The corresponding Null date values shown as blank value in Grid column and null date values are not converted to any other default date in our sample. We have also checked the Grid data source in console window. Please refer the following screenshot, 

 

We have attached our sample with this update and that sample can be downloadable from the below link, 


If we misunderstood your query, please provide the following for further assistance, 

  1. Share the issue reproducing scenario
  2. Grid package version details.
  3. Full Grid code with Grid dataSource.
  4. If possible, try to reproduce the reported issue in the attached sample and send back to us.
  5. Check the Grid dataSource in console window like above screenshot and share that screenshot (you can get the Grid instance in console window by using “document.getElementById("Grid").ej2_instances[0]” this command).

Regards, 
Venkatesh Ayothiraman. 


JO Johnathan May 14, 2020 09:35 PM UTC

Hello,

I am commenting here as it is related to this thread.
Using the latest syncfusion datagrid with a column that is EditType.DatePicker.
I want to set the default value in a datagrid add operation to be today's date.
What is the best way to do this?

Thanks

MS Manivel Sellamuthu Syncfusion Team May 15, 2020 06:44 AM UTC

Hi Johnathan, 

Based on your query we found that you like to set the today  date value as default value while performing add operation.  

You can achieve your requirement by using actionBegin event of EJ2 Grid. When you performing add operation our Grid actionBegin method gets triggered as requestType “add” and by using this method arguments you will set the default value for the date Column. Please refer the below code example and sample for more information. 

Index.cshtml 
 
<div> 
    <ejs-grid id="Grid" actionBegin="actionBegin" dataSource="ViewBag.dataSource" allowPaging="true"> 
       <e-grid-pagesettings pageSize="8"></e-grid-pagesettings> 
        <e-grid-columns> 
            .  .  .  .  .  .  
            <e-grid-column field="OrderDate" headerText="Order Date" type='date' format='yMd' editType="datepickeredit" width="170"></e-grid-column> 
            .  .  .  .  .  .   
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function actionBegin(args) { 
        if (args.requestType === "add") { 
            args.data.OrderDate = new Date();        //set the today’s date to the date column 
        } 
    } 
</script> 
 


Screenshot: 

 



Regards, 
Manivel 


Loader.
Up arrow icon