Timestamp show field (Firestore) in Date with time format in grid

[Tim Hartog]

Hi,

I have a grid with data that is coming from firestore. The column that should show the timestamp gives a problem showing in the right way.

It shows an empty column or it shows the the text Timestamp with seconds behind it.

I tried to assign the format with different types and formats. types: date,  datetime timestamp ,and several formats.

Also tried to assign it combined in an object type I saw as a reaction in a forum.

this.formatOptions = { type: 'datetime', format: "M/d/y hh:mm"

But none gives the output in the column with date and time

Is there a special way to process/convert a timestamp field (that is received in seconds or nanosecond)?

Kind regards,

Bob Fiering

[Manivel Sellamuthu]

Hi Bob, 

Greetings from Syncfusion support. 

You can achieve your requirement by using valueAccessor, which helps to achieve custom value formatting. Please refer the below code example and sample for more information. 

[App.component.html] 

<div class="control-section"> 

    <ejs-grid [dataSource]='data'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 

            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 

            <e-column field='OrderDate' headerText='Order Date' width='130' [valueAccessor]='valueAccess' textAlign='Right'></e-column> 

            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

[App.component.ts] 

import { Component, OnInit } from '@angular/core'; 

import { orderDetails } from './data'; 

import { Internationalization } from  '@syncfusion/ej2-base';  

 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html' 

}) 

export class AppComponent { 

    public data: Object[] = []; 

    public intl: Internationalization = new Internationalization(); 

    public dateFormatter: Function = this.intl.getDateFormat({ type: 'datetime', format: "M/d/y hh:mm a"}); 

     

    ngOnInit(): void { 

        this.data = [ 

          {OrderID: 10248,CustomerName: 'VINET',OrderDate:1566975229,Freight: 10.45}, 

          {OrderID: 10249,CustomerName: 'TOMSP',OrderDate:1591338350887,Freight: 15.30}]; 

    } 

 

    public valueAccess = (field: string, data: object, column: object) => {  

    let value = new Date (data[field]);  

     // here we can return the formatted value 

        return this.dateFormatter(value); 

    } 

} 

Screenshot:  

 

Sample: https://stackblitz.com/edit/angular-154901-timestamp?file=app.component.ts 

Documentation: 

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

https://ej2.syncfusion.com/angular/documentation/grid/columns/#date-formatting 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Tim Hartog]

Hello Manivel,

Thank you for the solution. It works perfect!!

Have a nice weekend.

Regards,

Bob

[Prasanna Kumar Viswanathan]

Hi Bob, 

 

We are happy to hear that the provided solution has been working fine at your end. 

 

Please get back to us if you need any further assistance. 

 

Regards, 

Prasanna Kumar N.S.V 

[Michael]

Hi Support,
This works fine for a static timestamp as in your example.

How do you access the timestamp variable from Firestores data?

My Code Below:

async syncData() {

return this.afs.collection('cruises', ref => ref

.where('clubId', '==', this.clubId)

// .where('vehClass', '==', 'C4C')

)

.valueChanges()

.pipe(

this.leftJoin(this.afs, 'uid', 'users'),

shareReplay(1)

).subscribe(

(entry: data[]) => {

this.vData = entry

}

)

}

Don't worry too much about the left join (I'm joining two collections). The lines after subscribe are where the data source is set for the grid. I can see everything fine. But, using your example, I can't access the timestamps (there are two).

I have tried creating variables for the timestamps, for example, public ts1: any; and public ts2: any; Then tried assigning the variables:

{
...
this.ts1 = entry['ts1']

this.ts2 = entry['ts2']

...

}

And in the template:

<e-column field='ts1' headerText='Start Date' width=120 [valueAccessor]="ts1" ></e-column>

But no joy for me.

Are you able to improve your example, please?

Michael Cockinos

[Rajapandi Ravi]

Hi Michael,

Greetings from Syncfusion support

From your query we could see that you like to access the value which was already displayed in the value accessor. By default, the ValueAccessor feature is used only for modifying the display data in UI level and it does not affect the grid’s data source. The Grid actions was performed based on the grid datasource.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/columns/#valueaccessor

Before we start providing solution to your query, we need some more information for our clarification. So please share the below details that will be helpful for us to provide better solution.

1)           In your shared information we could see that in subscribe the result “entry” is set to the datasource which is a JSON array format, but in your shared code for assigning variable (entry[‘ts1’] )

               here you are trying to access the ts1 value directly from the array which is a wrong way.

2)           Please share your exact requirement with detailed description.

3)           Share your requirement in pictorial or video demonstration that will be helpful for us to provide solution on your exact requirement case.

4)           Share any simple sample with your codes which was shared in your update, that would be helpful for us to validate and understand your scenario better.

Regards,

Rajapandi R

[Michael]

Thanks, Rajapandi R,
I am simply accessing the Firestore documents form. Firestore Collection. One of the fields is a Firestore Timestamp, similar to a UNIX timestamp.

The returned data looks like this: Timestamp(seconds=1661659200, nanoseconds=0).

The required format is 'dd/MM/yyyy'.

This is the code I use to extract the data into the grid:

async syncData(){
console.log('Start Sync Data');
const colRef =this.afs.collection(`cruises`,ref=>ref
.where('clubId','==',this.clubId)
)
colRef.valueChanges().subscribe(data =>{
this.grid.dataSource = data
})
​}

The field I am trying to convert is cruiseDate which is a field type ofFirestoreTimestamp.

I'm interested to see how I can change the returned data into a readable format using valueAccessor.

Regards,
Michael​

Attachment: Screenshot_20230407_at_3.12.59_pm_2e24e5e5.zip

[Michael]

OK, I couldn't wait for a reply and have found a how to do this.

I realized I couldn't use interpolation (Handlebars) directly in the field of the grid, but I could use ng-template and use interpolation within that:

            <e-column field='cruiseDate' headerText='Date' width=120>
              <ng-template #template let-data>
                {{ data.cruiseDate.toDate() | date: 'medium' }}
              </ng-template>
            </e-column>

I hope this helps others. 

Michael

[Suganya Gopinath]

Hi Michael, 

Thanks for sharing the status of the issue. Please get back to us for further updates.