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

formatting date string

Hello,

one field in my json-data is a date string like "2019-08-26".
When I set the type of the column to "date" like this:
<e-column field="studyDate" headerText="Erstellung" type="date"></e-column>
I get "Mon Aug 26 2019 02:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)", so the grid parses the date correctly.
When I try to format the date like "dd.MM.yyyy" using
<e-column field="studyDate" headerText="Erstellung" [format]="{type: 'date', format: 'dd.MM.yyyy'}" ></e-column>
I don't even get a single row in my grid. I only see "No records to display".
I also tried "{ type:‘date’, skeleton:‘short’ }", but the same result.

Hope you can help me.

Thank you.

Michael

9 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 19, 2019 10:51 AM UTC

Hi Michael,  

Greetings from the Syncfusion support,  

We could see you are using the date as string value in the given dataSource to the Grid. This causes the Grid to bind the date as string which on conversion with the required format throwing an exception. So, we suggest you to convert the respective string as a date value using native Date object.   

Refer to the following code example and demo. 
 
    public ngOnInit(): void { 
      localdata[0].OrderDate = new Date(localdata[0].OrderDate); 
      this.gridData = localdata; 
        this.pageSettings = { pageCount: 5 }; 
    } 


Regards,  
Seeni Sakthi Kumar S 



MH Michael Hertlein September 19, 2019 09:38 PM UTC

You're right, my date is a string value. It's from a MySQL-Database.

I'm just wondering, because when I only set "type='date'", then the date seems to be parsed correcty by the grid, because the output is "Mon Aug 26 2019 02:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)". So my string was automatically converted into a date and was formatted with my culutre "de-DE".

So it would be great, if this automatically parsed date could also be formatted.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 20, 2019 07:31 AM UTC

Hi Michael,  
 
By default, Grid will parse the UTC string date when the column type is set as date. But in your case, it is not the UTC string. So we suggest to externally parse the string with the date objects.  
 
Regards,  
Seeni Sakthi Kumar S 



MH Michael Hertlein September 20, 2019 08:21 AM UTC

Hi,

thank you for your answer.
I could accept it, if the date would never be parsed. But it is parsed, if I don't set a format. So the grid is parsing my date string correctly. Otherwise it could not reformat it to "Mon Aug 26 2019 02:00:00 GMT+0200 (Mitteleuropäische Sommerzeit)".

On the other hand, my string is a UTC datestring, as described in https://www.w3.org/TR/NOTE-datetime. It is a correct format without time.

I'm sorry, but I would call this a bug, because parsing the date works without error if the format option is not set and throws an exception if the format option is set.

So I think we can end this discussion here and I will report this as bug in your feedback portal.

Nevertheless thanks for your answer. For the moment I know how to solve this.

Kind regards,

Michael



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 23, 2019 11:39 AM UTC

Hi Michael, 

We could see the problem faced by you while using the UTC date string in JSON data. We have suggest to mention the type and format using custom date formatting in the Grid. type property used to define type of the column and format refers to the type conversion. Refer to the following code example. 
 
[app.component.html] 
   <ejs-grid #grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column> 
            <e-column field='OrderDate' headerText='Order Date' width='130' type="date" [format]="orderDateFormat" textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
            <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 
        </e-columns> 
    </ejs-grid> 

[app.component.ts] 

public orderDateFormat: any = {type:"date", format:"dd.MM.yyyy"}; 



Please get back to us, if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 



MH Michael Hertlein September 23, 2019 09:27 PM UTC

Hi,

thank you very much. This is really great.
I'd never have thought of using the type twice.

Thanks for this great service.

Michael


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 24, 2019 10:47 AM UTC

Hi Michael,  
 
Thanks for your update.  
 
We are happy to hear your requirement has been resolved and you are good to go.  
 
Regards,  
Seeni Sakthi Kumar S 



OA Omur Akca replied to Seeni Sakthi Kumar Seeni Raj June 22, 2020 12:34 PM UTC

Hi Michael,  
 
Thanks for your update.  
 
We are happy to hear your requirement has been resolved and you are good to go.  
 
Regards,  
Seeni Sakthi Kumar S 


Hi,

I've been struggling with the same issue and it seems that I can't solve it with these suggestions. Here is how to reproduce it:

<e-column field="dateRaised" headerText="Date Raised" type="date" format="dateFormatOptions"></e-column>

public dateFormatOptionsobject = {type:"date"format:"dd.MM.yyyy"};

and my json date string is:
 "dateRaised""2020-06-22T00:34:58.297365",

When I only select "type='date'" it displays it as

Mon Jun 22 2020 00:34:58 GMT+0100 (British Summer Time)

,,,which is correct.

Can you please guide me on how I can solve this issue.

Thanks
Omur


Attachment: Date_7b65ce8a.zip


VS Vignesh Sivagnanam Syncfusion Team June 23, 2020 09:30 AM UTC

Hi Omur Akca 
  
Thanks for contacting Syncfusion support.  
  
We checked your reported problem at our end, you can formatting the date by using the “[format]” in your sample to display the date at given format. 
  
Please check below sample for your reference: 
  
  
<e-column field='OrderDate' headerText='Order Date' width='150' [format]='dateFormatOptions' textAlign='Right'></e-column> 
  
  
Please check below sample for your reference: 
  
  
Let us know if you have any concerns. 
  
Regards,
Vignesh Sivagnanam 


Loader.
Live Chat Icon For mobile
Up arrow icon