Kendo Grid for Angular 2 Excel export date formatting

Question

When we try to export the grid data from Kendo UI Grid for Angular, One of the grid columns (Date column) doesn't format the actual date value. Here is my code.

<kendo-excelexport [data]="products" [group]="group" fileName="products.xlsx" [headerPaddingCellOptions]="headerPaddingCells" #excelexport>
    <kendo-excelexport-column field="dateofService" title="Date(s) of Service" [width]="170"  [cellOptions]="{ format: 'yy-MM-dd hh:mm:ss' }"  >
    </kendo-excelexport-column>
    <kendo-excelexport-column field="memberName"   title="Patient"  [width]="250">
        <ng-template kendoGridExcelTemplate >Bob Woolmer</ng-template>
    </kendo-excelexport-column>
    <kendo-excelexport-column field="provider" title="Provider" [width]="180">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="status" title="Status" [width]="100">
    </kendo-excelexport-column>
    <kendo-excelexport-column field="patientResponsibility" title="You Owe" width="120"   [cellOptions]="{ format: '$#,##0.00',bold:true }">
    </kendo-excelexport-column>
</kendo-excelexport>

Date of Service columns always display "2017-09-09T00:00:00" instead of 09/09/2017.

Does any one know how to format the date to have just MM/dd/yyyy in excel export in angular kendo grid?

int-i int-i · Accepted Answer · 2018-04-16T22:47:54

Instead of this

<kendo-excelexport-column field="dateofService" title="Date(s) of Service" [width]="170"  [cellOptions]="{ format: 'yy-MM-dd hh:mm:ss' }"></kendo-excelexport-column>`

Try this

<kendo-excelexport-column field="dateofService" title="Date(s) of Service" [width]="170"  [cellOptions]="{ format: 'mm/dd/yyyy' }"></kendo-excelexport-column>

If you look at the excel export API - CellOptions, they seem to support all excel formatting options.

The below link specifies all supported cell format options: Supported Formats

Full sample code (Also see it in action here: Plunker)

import { Component } from '@angular/core';
import { products } from './products';

@Component({
    selector: 'my-app',
    template: `
        <button type="button" class="k-button" (click)="save(excelexport)">Export To Excel</button>

        <kendo-excelexport #excelexport [data]="data" [fileName]=downloadFileName>
            <kendo-excelexport-column field="ProductID" title="Product ID" [width]="75">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="ProductName" title="Product Name">
            </kendo-excelexport-column>
            <kendo-excelexport-column field="SomeDate" title="Start Date" [cellOptions]="{ format: 'mm/dd/yyyy' }"></kendo-excelexport-column>
      </kendo-excelexport>
    `
}) 
export class AppComponent {
    public data: any[] = products;
    public downloadFileName: string = "My file.xlsx"

    public save(component): void {

        this.data.forEach((product) => {
          product.SomeDate = new Date();
        });

        setTimeout(
          () => {
            const options = component.workbookOptions();
            component.save(options);
          }, 1000);
    }
}

Kendo Grid for Angular 2 Excel export date formatting

1 Answers