vue count items date within 30days and display the total on the page-CodePudding

How do i count the items by checking the date within 30 days from the current date?

Here is my sample code:


    <table width="100%"  border="1">
      <tr>
        <th>row</th>
        <th>Item</th>
        <th>Category</th>
        <th>Date</th>
        <th>Description</th>
      </tr>
      <tr v-for="(user,index) in bookData" v-bind:key="user.listData">
        <td>{{ user.index }}</td>
        <td>{{ user.item_id }}</td>
        <td>{{ user.category_id }}</td>
        <td>{{ user.r_date }}</td>
        <td>{{ user.description }}</td>
      </tr>
    </table>
    New Item within 30 days :

Dates output is like this "02/18/2022, 6:42:36 pm"

Im not sure if need to convert it on a dateformat, please advice and help how to count it.

Thanks in advance.

CodePudding user response：

You could use a computed function to filter and count dates within 30 days

computed: {

...

    newItemsWithinThirtyDays() {
        return this.bookData.filter(user => {
            date = new Date(user.r_date)
            futureDate = (new Date())
            futureDate.setDate((new Date()).getDate()   30)

            const msBetweenDates = Math.abs(date.getTime() - futureDate.getTime())
            return msBetweenDates / (24 * 60 * 60 * 1000) < 30
        }).length
    }

...

}

Use the property as followed: {{ newItemsWithinThirtyDays }}

CodePudding user response：

You can use a computed property to filter your user and check if the date attribute is within 30 days.

To convert your date you can use the classic Date constructor and you can then compare if the date is between now and a date 30 days earlier.

Example:

const bookData = [
  {
    r_date:"02/18/2022, 6:42:36 pm" 
  },
  {
    r_date:"05/05/2022, 6:42:36 pm" 
  },
  {
    r_date:"01/01/2022, 6:42:36 pm" 
  }
]

const checkDateWithin30Days = (date) => {
  const now = new Date()
  const oneMonthEarlier = new Date(now.getFullYear(), now.getMonth()-1, now.getDate())
  console.log(new Date(date) > oneMonthEarlier)
  return new Date(date) > oneMonthEarlier
}

bookData.forEach(user => checkDateWithin30Days(user.r_date))

I've here compared one month earlier but you can make it as exactly 30 days earlier with

const thirtyDaysEarlier = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 30)

You can then include this inside your vue app

For example :

new Vue({
      el: '#app',
      data: () => {
        return {
          bookData: [{
              r_date: "04/18/2022, 6:42:36 pm"
            },
            {
              r_date: "05/05/2022, 6:42:36 pm"
            },
            {
              r_date: "01/01/2022, 6:42:36 pm"
            }
          ]
        }
      },

      computed: {
        bookDataFilter() {
          return this.bookData.filter(user => this.checkDateWithin30Days(user.r_date))
          }
        },

        methods: {
          checkDateWithin30Days(date) {
            const now = new Date()
            const oneMonthEarlier = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate())
            console.log(new Date(date) > oneMonthEarlier)
            return new Date(date) > oneMonthEarlier
          }
        }
      })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="user of bookDataFilter">
      {{ user }}
    </li>
  </ul>
  
  <div>Number of elements : {{ bookDataFilter.length }}</div>
</div>