Format Date in Grid

[Adrian Schafer]

How can i Format the date column in a Grid?

[Pavithra Subramaniyam]

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 : 

1. column.format               : http://ej2.syncfusion.com/documentation/grid/columns.html?lang=typescript#format 

2. manipulating-datetime: http://ej2.syncfusion.com/documentation/base/intl.html?lang=typescript#manipulating-datetime 

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

Regards, 

Pavithra S. 

       

[Adrian Schafer]

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

[Pavithra Subramaniyam]

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'); 

Reference Link: http://cldr.unicode.org/translation/default-content  

Documentation: https://ej2.syncfusion.com/documentation/base/intl.html?lang=typescript#loading-culture-data  

Sample Link: http://plnkr.co/edit/yg6JCLku75llQfkKrN08?p=preview  

Regards, 

Pavithra S. 

[Adrian Schafer]

Thank you

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

Regards,

Adrian

[Renjith Singh Rajendran]

Hi Adrian, 

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

http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core-1298555869 

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. 

[Gary Whiteside]

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

[Renjith Singh Rajendran]

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 3^rd 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, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-dotnet-core1598733007 

Documentation link : https://ej2.syncfusion.com/16.1.24/documentation/grid/api-grid.html?lang=typescript#load 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Saar Cohen]

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?

[Mani Sankar Durai]

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>  

 

 

Documentation: https://ej2.syncfusion.com/documentation/grid/api-column.html?lang=typescript#format  

 

Regards, 

Manisankar Durai. 

[Richard Cook]

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?

[Venkatesh Ayothi Raman]

  

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/I136149473778476.zip 

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. 

[Johnathan]

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

[Manivel Sellamuthu]

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> 

 

Sample:   https://www.syncfusion.com/downloads/support/forum/136149/ze/1361491649122833.zip 

Screenshot: 

 

Regards, 

Manivel