formatting date string

[Michael Hertlein]

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

[Seeni Sakthi Kumar Seeni Raj]

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 }; 

    } 

https://stackblitz.com/edit/angular-mxrvtb-wuefrv?file=app.component.ts 

Regards,  

Seeni Sakthi Kumar S 

[Michael Hertlein]

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.

[Seeni Sakthi Kumar Seeni Raj]

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 

[Michael Hertlein]

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

[Seeni Sakthi Kumar Seeni Raj]

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"}; 

Sample link: https://stackblitz.com/edit/angular-jffgp1-fskrym 

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

Regards, 

Seeni Sakthi Kumar S 

[Michael Hertlein]

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

[Seeni Sakthi Kumar Seeni Raj]

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 

[Omur Akca]

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 dateFormatOptions: object = {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

[Vignesh Sivagnanam]

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: 

  

Sample : https://stackblitz.com/edit/roughangularsample-mknywt?file=app.component.html 

  

Let us know if you have any concerns. 

  

Regards,
Vignesh Sivagnanam