No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    4
    6
    2764
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • O
      oskar last edited by 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

      C digiproduct 2 Replies Last reply Reply Quote 0
      • C
        cashmisa @oskar last edited by

        @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

        O 1 Reply Last reply Reply Quote 0
        • digiproduct
          digiproduct @oskar last edited by

          @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?

          1 Reply Last reply Reply Quote 0
          • O
            oskar @cashmisa last edited by

            @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

            C 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman last edited by

              @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.

              1 Reply Last reply Reply Quote 0
              • C
                cashmisa @oskar last edited by

                @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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post