Problems with fields "Date"

[Juan]

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.

[Jeevakanth Palaniappan]

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: 

https://ej2.syncfusion.com/angular/documentation/grid/columns.html#format  

https://ej2.syncfusion.com/angular/documentation/base/intl.html#custom-formats  

Regards, 

Jeevakanth SP. 

[Juan]

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!

[Gurupriyadharshini Sankaranarayanan]

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

 

sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/angular941845241

 

Regards,

Gurupriyadharshini S.

[Juan]

Agree.
Thank you very much!

[Venkatesh Ayothi Raman]

Hi Juan, 

 

Thanks for the update. 

 

We are very happy to hear that your requirement is achieved. 

 

Regards,
Venkatesh Ayothiraman.