1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Custom date format

Custom date format

Hi!
I'm developing a solution wich has several grids. 
Of course, some of the fields are date type and I'd like to show them in the usual format for my culture (catalan and spanish but is the same for almost all Europe).
I've seen lots of string formats which apply to the column but almost all are in "english" notation, none of them are valid for our culture as our common format is dd/MM/yyyy so I had to put it (temporarily, i hope) in the yMd which is confusing for the user.
Is there any way to write a custom format (some times I'd like to use just dd/MM or whatever)? Of course, I'd like that the format remain the same when editing the row.
Here's a sample of a grid column:
            <e-grid-column field="Date" headerText="Date" format="yMd" editType="date"/>

Let me ask you a second question.
I've seen that not all the controls have been translated to all languages. I can understand this but, is there any option to have a js template for doing ourselves the translations? I had to browse hundreds of pages until I found something like a translation file for spanish language from which make easier to build a catalan translation for the datagrid (and even now, there are some elements that appear in english).

Thanks in advance for your assistance.


3 Replies
HJ Hariharan J V Syncfusion Team September 19, 2018 09:05 AM UTC

Hi Toni, 

Thanks for contacting Syncfusion support. 

Query1:  Is there any way to write a custom format (sometimes I'd like to use just dd/MM or whatever)? 

We suggest you to set custom format inside the “Load” event of the grid. In the below code, we have set the custom format (dd/MM) for “ShippedDate” columns of Grid. You can also use the below way to achieve your requirement. 
Please refer to the below sample and code example for more information.  

<div> 
    <ejs-grid id="Grid" locale="es" dataSource="ViewBag.DataSource" allowPaging="true" load ="load" allowGrouping="true"> 
        <e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="ShippedDate" headerText="Ship Date" width="170"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function load() { 
        this.columns[4].format = { type: 'date', format: 'dd/MM' }; // custom date format 
    } 
</script> 

Query2:  I need to change  English to  Spanish language 
 
As per your requirement we have created a sample with “es” culture (Spanish language). In the below sample, we have applied the global culture(es) by using the setCulture method and load the corresponding cldr-data. You can also use the below way to set the global culture and format the values to corresponding language. 

Kindly refer to the below sample and documentation link for more information. 

[Index.cshmtl] 
<script> 
   ej.base.L10n.load({ 
        'es': { 
            'grid': { 
                'EmptyRecord': 'No hay registros publicados', 
                'GroupDropArea': 'Arrastre una columna aquí en la columna de grupo', 
            }, 
            'pager': { 
                'currentPageInfo': '{0} de {1} páginas', 
                'totalItemsInfo':'({0} mensajes)', 
            } 
        } 
    }); 
</script> 
<div> 
    <ejs-grid id="Grid" locale="es" dataSource="ViewBag.DataSource" allowPaging="true" load ="load" allowGrouping="true"> 
        <e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="ShipCountry" headerText="Ship Country"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
  
[Layout.cshtml] 
    <script> 
 
       function loadCultureFiles(name) { 
        ej.base.setCulture(name); 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
        if (name === 'ar') { 
            files.push('numberingSystems.json'); 
        } 
        var loader = ej.base.loadCldr; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            if (name === 'ar' && prop === files.length - 1) { 
                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false); 
            } else { 
                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
            } 
            ajax.onSuccess = function (value) { 
                val = value; 
            }; 
            ajax.send(); 
            loader(JSON.parse(val)); 
        }; 
        for (var prop = 0; prop < files.length; prop++) { 
            loadCulture(prop); 
        } 
    } 
 
    document.addEventListener('DOMContentLoaded', function () { 
        loadCultureFiles('es'); 
    }); 
    </script> 



Regards,
Hariharan 


TO Toni September 19, 2018 10:43 AM UTC

Hi again. 
Thanks for your quick answer.
For the 1st question, now the grid is showing the format as I expected. But when I'm going to edit it appears a long (and english format) as you can see in the image below:


And for the second question, I like your answer but I miss a guide on what to translate.
Where can I find the key names that I should translate for every control (in the image below, marked on yellow):

And finally, where can I get the cldr-data? Is there any cdn to link to?

Thanks


HJ Hariharan J V Syncfusion Team September 21, 2018 04:57 AM UTC

Hi Toni, 
 
Query: For the 1st question, now the grid is showing the format as I expected. But when I'm going to edit it appears a long (and english format) as you can see in the image below: 
 
We have validated your query and you can achieve your requirement by using below way. To overcome this problem, you need to set editType as datepickeredit like below code example. Please find the below code example and sample for your reference. 
 
[code example] 
<div> 
    <ejs-grid id="Grid" locale="es" dataSource="ViewBag.DataSource" allowPaging="true" load="load" allowGrouping="true"> 
        <e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" format="N2" width="120"></e-grid-column> 
            <e-grid-column field="OrderDate" headerText="Order Date" type="date" editType="datepickeredit" format="yMd" width="10%"></e-grid-column> 
            <e-grid-column field="ShippedDate" headerText="Ship Date" editType="datepickeredit" width="170"></e-grid-column> 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
..... 
..... 
 
 
 
Query: And for the second question, I like your answer but I miss a guide on what to translate. Where can I find the key names that I should translate 
 
The localization library allows you to localize default text content of the Grid. The grid component has static text on some features (like group drop area text, pager information text, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. 
 
In the below link, you can find the list of properties and its values used in grid. 
 
 
Query: where can I get the cldr-data? Is there any cdn to link to? 
 
You need to install cldr-data globally by using the below command. 
 
Command: 
npm install cldr-data -g 
 
After installing cldr-data, you need to give path to your application. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Hariharan 


Loader.
Up arrow icon