Converting Unix Timestamp to Date using Vue

[Andy]

Hi there --

I'm trying to convert a Unix timestamp that I am getting from Firestore into a date that can be added to a Grid in view.  As of now I have bound the data to Firestore in Vuex and I'm accessing the objects to be rendered in the grid through a Vuex getter.  I am unsure at this point how to proceed as it doesn't seem I can use a method or computed property prior to loading the data into the Grid.  As of now my code is as follows below, and the dates are showing up in the Grid as "1584162000".  Any ideas how I can format this to render appropriately in the grid?

<ejs-grid :dataSource="getPlants">
   <e-columns>
      <e-column field="vegetableName" headerText="Vegetable"></e-column>
      <e-column field="plantName" headerText="Plant Name"></e-column>
      <e-column field="startLocation" headerText="Start Location"></e-column>
      <e-column field="startDate.seconds" headerText="Start Date"></e-column>
      <e-column field="harvestDate.seconds" headerText="Harvest Date" format="MM-dd-yyyy" type="date"></e-column>
   </e-columns>
</ejs-grid>

[Prasanna Kumar Viswanathan]

Hi Andy, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement we suspect that you need to convert the Unix Timestamp value to desired format in the EJ2 Grid. To achieve your requirement, we suggest you to define 

the format like below code example 

 

 

<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true"> 

      <e-columns> 

        -------------------------------- 

        <e-column field="OrderDate" headerText="Order Date” width="120":format="formatOptions" 

          type="date" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

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

 

Vue.use(GridPlugin); 

 

export default { 

  data() { 

    return { 

      data: [ 

        { 

          OrderID: 10248, 

          CustomerID: "ASDGH", 

          OrderDate: 1588668692, 

          Freight: 32.58 

        } 

      ], 

      formatOptions: { format: "MM-dd-yyyy", type: "date" } 

    }; 

  }, 

  provide: { 

    grid: [Page] 

  }, 

  methods: {} 

}; 

  

Sample: https://codesandbox.io/s/vue-template-iyi09?file=/src/App.vue:32-1051 

 

If we misunderstood your query please get back to us with more details. 

 

Regards, 

Prasanna Kumar N.S.V 

[Andy]

Hi again --

Thank you for the response, I appreciate you taking the time to help me.  From what I can tell you understand the question, however the solution provided does not work.  If you look at the date returned from the formatting you have used it returns January 19, 1970 (01-19-1970).  This same date is returned regardless of the Unix timestamp that I enter, including a timestamp for right now (1588687565).  This is strange as the Unix epoch date is 01-01-1970, so I'm not sure why it is adding the additional 18 days.  In the codesandbox included, if I change the date to 05/05/2020 it works fine, so it is obviously having issues parsing the Unix timestamp.  Any other solution would be appreciated.

Thanks again!

[Ajith Govarthan]

Hi Andy, 

Sorry for the inconveniences. 

Based on the provided timestamp value we have converted them as date using the new Date method. But we are getting only 19^th Jan 1970 only. We have attached the screenshot please refer the screenshot for your reference. 

Screen shot: 

 

To validate further on your requirement please share the below details. 

1. Share the video/screen shot  of the reported issue.
2. Share the Syncfusion package version.

Regards, 

Ajith G.