We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Set date format globally

Is it possible to set the date format globally for all components?

7 Replies

SA Saravanan Arunachalam Syncfusion Team January 26, 2017 08:26 AM UTC

Hi Wouter, 
Thanks for contacting Syncfusion’s support. 
We understood from your query you need to render the ejDatePicker and ejGrid with Date column and both controls formatted with same date format (MM/dd/yyyy). You can achieved this requirement by using dateFormat property for ejDatePicker and format property for ejGrid control and please refer to the below online API reference link and online sample link. 
If it is not your requirement, please provide the following details. 
1.       Share the clear requirement details. 
2.       Share expected output screenshot 
Saravanan A. 

WO Wouter January 26, 2017 02:37 PM UTC

Requirement: Set it once for every instance instead of setting the format for every column of every grid.

Example result (achieved with setting the format 4 times):

SA Saravanan Arunachalam Syncfusion Team January 27, 2017 06:29 AM UTC

Hi Woter, 
The columns.format property used to format the number and date columns which is determined by its type and it is set based on the values of that columns. So, we can’t set the default format (globaly for date or number) for any one of the column specifically but we can set the format for the date columns programmatically by using actionBegin event and type property of Grid columns. Please refer to the below code example and jsplayground sample. 
                dataSource: data, 
                actionBegin: "onActionBegin", 
                columns: [ 
                        { field: "OrderDate", headerText: "Order Date", width: 80, type: "date", textAlign: ej.TextAlign.Right, priority: 2 }, 
                        . . . 
function onActionBegin(args){ 
                var cols = this.model.columns;  
                for(var i=0;i<cols.length;i++){ 
                    if(cols[i].type == "date") // detect the date type column 
                        cols[i].format="{0:MM/dd/yyyy}"; // set the format for that column 
Note: columns.format is common for both number and date columns. 
Saravanan A. 

WO Wouter January 27, 2017 09:08 AM UTC

Thanks for your answer. However, I'm using a bit of a different setup: http://jsplayground.syncfusion.com/lbcm5tme and then it wont work. Is this solvable?

PS Pavithra Subramaniyam Syncfusion Team January 30, 2017 06:35 AM UTC

Hi Woter, 
We have analyzed your sample and the cause of the issue is that you have set the dataSource and actionBegin event handler by setModel. 
 The event handler cannot set via the setModel of Grid control. So we suggest you to set the handler for actionBegin event While render 
 the Grid initially. Please refer the following code snippet and the sample given below. 
<div id="Grid" 
                     data-ej-columns="[{'field': 'OrderID', 'allowFiltering':false},{'field': 'ShipCity'},{'field': 'OrderDate','type':'date'},]" 
Pavithra S. 

WO Wouter February 1, 2017 02:50 PM UTC

Thanks, your example works well. However it doesnt work if I initialize the grid like this:

                var dm = ej.DataManager({
                    url: "localhost:8080/myapi/p",
                    adaptor: new ej.UrlAdaptor(),
                    offline: false

                    dataSource: dm

PS Pavithra Subramaniyam Syncfusion Team February 2, 2017 05:01 AM UTC

Hi Wouter, 
We are sorry and we are unable to reproduce the issue at our end and we have created a separate sample as you mentioned. Please refer the following online sample link. 
And hence please share the following details to give response as early as possible. 
·       If possible please reproduce the issue in the attached sample. 
·       If possible please share the host sample. 

Pavithra S. 

Live Chat Icon For mobile
Up arrow icon