/Javascript/Vue/Vuejs filter array by dates

Vuejs filter array by dates

Vue date filter component

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    startDate:null,
    endDate:null,
    items: [
      {
        name: 'Nolan',
        type: 'mercedes',
        year: '2020',
        country: 'england',
        date: '08/01/2020'
      },
      {
        name: 'Edgar',
        type: 'bmw',
        year: '2020',
        country:'belgium',
        date: '08/11/2020'
      },
      {
        name: 'John',
        type: 'bmw',
        year: '2019',
        country: 'england',
        date: '08/21/2020'
      },
      {
        name: 'Axel',
        type: 'mercedes',
        year: '2020',
        country: 'england',
        date: '08/01/2020'
      }
    ]
  },
  computed: {
    filterItem() {
      let filterType = this.selectedType;
      let startDate = this.localizeDate(this.startDate);
      let endDate = this.localizeDate(this.endDate);
      
      const itemsByType = filterType ? this.items.filter(item => item.type === filterType) : this.items
      return itemsByType
        .filter(item => {
          const itemDate = new Date(item.date)
          if (startDate && endDate) {
            return startDate <= itemDate && itemDate <= endDate;
          }
          if (startDate && !endDate) {
            return startDate <= itemDate;
          }
          if (!startDate && endDate) {
            return itemDate <= endDate;
          }
          return true;
        })
    }
  },
  methods: {
    localizeDate(date) {
      // Date picker uses ISO format (yyyy-mm-dd), which is UTC. The data
      // contains locale specific date strings (mm/dd/yyyy), which `Date`
      // parses with local time-zone offset instead of UTC. Normalize the
      // ISO date so we're comparing local times.
      if (!date || !date.includes('-')) return date
      const [yyyy, mm, dd] = date.split('-')
      return new Date(`${mm}/${dd}/${yyyy}`)
    },
    formatDate(date) {
      return new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(date))
    }
  }
})

Source: stackoverflow.com

Vuejs filter array by dates

<ul id="sortbydate">
  <li v-for="(item, index) in items" style="list-style:none">
    {{ index }} - {{ item.date }}
  </li>
</ul>

Source: stackoverflow.com

Similar codes

-1 vote316 views1 answer
Vuex store in js file
Javascript Vue
3 votes347 views5 answers
Vue js countdown timer
Javascript Vue
0 vote324 views1 answer
How to pass a parameter to Vue @click event handler
Javascript Vue
2 votes361 views4 answers
Scroll to top vue
Javascript Vue
0 vote352 views1 answer
Jsconfig for default vue
Javascript Vue
2 votes325 views1 answer
Vuejs truncate text
Javascript Vue
0 vote329 views1 answer
Vuejs bootsrap modal hidden event
Javascript Vue
2 votes318 views1 answer
Open url in new window vue
Javascript Vue
0 vote348 views1 answer
Vuejs get value of checkbox group
Javascript Vue
0 vote337 views1 answer
Vue cli - Uncaught SyntaxError: Unexpected token <
Javascript Vue