1. Home
  2. Help
  3. Format date in q-table and q-table refresh after event?

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

  • O

    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

    0 C digiproduct 2 Replies
  • C

    @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

    0 O 1 Reply
  • 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?

    0
  • O

    @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

    0 C 1 Reply
  • 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.

    0
  • C

    @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

    0
Log in to reply