Format date in q-table and q-table refresh after event?

oskar

Hi , I have a few hurdles in my SPA to overcome, I am new to Quasar and programming in general so please forgive my lack of knowledge.
My SPA displays data, from json arrays from API calls, in q-table component. But currently the date extracted is I believe in Unix time stamp format, and I think I have to use this somehow https://quasar.dev/quasar-utils/date-utils#Manipulate-dates to format it to DD/MM/YYYY

let timeStamp = Date.now()
let formattedString = date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ')

but am not sure where to put it? Or does server-side q-table have a way of converting dates ?

Secondly, I have a date picker that selects specific data from database and shows results on q-table. Is there a way to clear a q-table of results from the first choice to make way for the second date picked?
Currently new results are just added on top of existing results.

Cheers

cashmisa

@oskar

1st question is about display date received from api in specific format in qtable? If so, look into Defining the columns. e.g. You can format the date recieved with a function.

I don’t quite get the 2nd question, looks like you want to modify a specific element of an array? Would be good to have a codepen example.

Cheers

digiproduct

@oskar I have only used QTable a very little, but …

Isn’t your way to stop the second set of data being added to the first, just to clear the data array before adding the second set of data?

oskar

@cashmisa Yes ! you are right sorry my question wasnt clear, I have edited it for clarity
I see will look into that thank you

Yes I have setup a code pen here
https://codepen.io/osv0005/pen/MMPMwY?&editable=true&editors=101,
and have put in the date.format function. Am I correct in that val (value) is linked to the ‘field’ attribute ? Or do I just put the dateOfCreation instead of ‘val’ ?

This is my date picker
https://codepen.io/osv0005/pen/wLQvBR?editors=1010
I just had a thought that I could attach an event listener to the date picker to clear the q-table data possibly , re @digiproduct recommendation thank you

metalsadman

@oskar see the different examples in the docs, study both component you are trying to use. Check the api cards involve. Dont dive directly to what your desired output imo, seeing that your usecase is sort of complex to skip important steps in solving it.

cashmisa

@oskar
format: val => date.formatDate(val, ‘DD-MM-YYYY’) is correct
you codepen example is not working… but looks like you want to filter the data array using the date selected by user - yes you can just do that in the event listener