Problems with fields "Date"

Hello.

I have a Grid with a column "Date"

this.data= [
{
OrderID: 10248, Empresa: 'VINET', SAP: 5, Fec_Alta: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
Pedido: 'CJ', CIF: '51100', SoloContratos2017: true, Freight: 32.38, Verified: !0
},


this.formatOptions={type:'date',format:"dd/MM/yyyy"};

<e-column field="Fec_Alta" headerText="Fecha Alta" textAlign='Right' [format]='formatOptions' width="120">e-column>

This column works fine, but the problem occurs when I read the data of an api rest and arrive with this format:


This way, no data appears in the grid.

Do I have to do some conversion in the data so that they appear correctly as a date?
I read the data so:
getPedidos(): Observable<Pedido[]>{
return this.http.get<Pedido[]>(environment.rootUrl + '/api/vpedidos')
.pipe(
catchError(err => {
this.erroresService.showError('Error leyendo pedidos!' , err);
throw err;
})
);
}


Regards.










5 Replies

JP Jeevakanth Palaniappan Syncfusion Team July 23, 2018 01:45 PM UTC

Hi Juan, 

We have validated your query and we suggest you to set the type as date (type: ‘date’) in the column instead of formatOptions. Kindly please refer to the below code snippet and help documentation for more information. 

<e-Column field = “Fec Alta” headerText=”Fecha Alta” textAlign=’Right’ type=’date’ [format]=’formatOptions’ width=’120’> 

this.formatOptions={format:’yMd’}; 


Help Documentation Link: 

Regards, 
Jeevakanth SP. 



JU Juan July 23, 2018 02:04 PM UTC

Thank you very much for your quick reply.

Finally it works like this:

<e-column field="Fec_Alta" headerText="Fecha Alta" textAlign='Right' type='date' [format]='formatOptions' width="120"></e-column>

and

this.formatOptions = { type: 'date', format: "dd/MM/yyyy" };

In formatOptions if I remove type: 'date' does not show the data of the field.

Thank you!










GS Gurupriyadharshini Sankaranarayanan Syncfusion Team July 24, 2018 11:45 AM UTC

Hi Juan,
 
Thanks for contacting Syncfusion support.
 
We have checked your query and you can achieve your requirement by using  format property. In the last update, we have suggested you to use built-in CLDR format. In that format, type is not required. But If you use the custom format property, then you set the type as 'date'.
 
[app.component.ts]
<e-column field='OrderDate' headerText='OrderDate' width='130' type='date'[format]='formatOptions' textAlign='Right'></e-column>                                                                                                                                                                                                                             
this.formatOptions = { type: 'date', format: 'dd/MM/yyyy' };
 
 
Regards,
Gurupriyadharshini S.



JU Juan July 24, 2018 01:18 PM UTC

Agree.
Thank you very much!



VA Venkatesh Ayothi Raman Syncfusion Team July 25, 2018 03:56 AM UTC

Hi Juan, 
 
Thanks for the update. 
 
We are very happy to hear that your requirement is achieved. 
 
Regards,
Venkatesh Ayothiraman.
 


Loader.
Up arrow icon