Formatting date in Excel export

[Tom McNeer]

Hello,

In some of my grids, I have date columns defined like this:

<e-column

field="ScheduledDate"

headerText="Scheduled Date"

format="yMd"

type="date"

textAlign="center"

width="90"

:allowFiltering="false"

></e-column>

The formatting displayed in the grid is correct. But when I export the grid to Excel, the resulting dates in the spreadsheet are ISO dates:

2020-12-23T05:00:00.000Z

How can I set options so that these columns retain their on-screen formatting (m/d/yyyy or mm/dd/yyyy)? What I'm going for is a value that will be date-only (no time values) and will be recognized by Excel as a date.

Thanks for your help.

[Rajapandi Ravi]

Hi Tom, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to export the excel file with the date format which was already applied in the Grid. We suggest you to parse the json data before applying to the Grid, through a method parseJson in DataUtil Which parses the date string to date Objects. Please refer the below code example and sample for more information. 

 

<template> 

  <div id="app"> 

    <ejs-grid 

      id="Grid" 

      ref="grid" 

      height="400" 

      :allowExcelExport="true" 

      :toolbarClick="toolbarClick" 

    ></ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import {GridPlugin, Toolbar, ExcelExport, Page, } from "@syncfusion/ej2-vue-grids"; 

import { DataUtil } from "@syncfusion/ej2-data"; 

import { data } from "./datasource"; 

Vue.use(GridPlugin); 

export default { 

  data() { 

    return { 

      data: DataUtil.parse.parseJson(JSON.stringify(data)), 

      toolbarOptions: ["ExcelExport"], 

      columns: [ 

        .  .  .  .  .  .  .  . 

        .  .  .  .  .  .  .  . 

      ], 

    }; 

  }, 

  provide: { 

    grid: [ExcelExport, Page, Toolbar], 

  }, 

  methods: { 

    toolbarClick: function (args) { 

      if (args.item.id === "Grid_excelexport") { 

        // 'Grid_excelexport' -> Grid component id + _ + toolbar item name 

        this.$refs.grid.excelExport(); 

      } 

    }, 

 }, 

}; 

</script> 

Sample: https://codesandbox.io/s/156225-vue-recordclick-forked-05mwb?file=/src/App.vue 

Screenshot:  

 

Regards, 

Rajapandi R 

[Tom McNeer]

Perfect. Thanks very much for your help.

[Rajapandi Ravi]

Hi Tom, 

We are happy to hear that our suggested solution was worked fine at your end. 

Please get back to us if you need further assistance.  

Regards,  

Rajapandi R