Vue Js filter between two dates | Creating a Filter for Start and End Dates

Vue Js Filter Between Two Dates :In Vuejs, to filter data between two dates, you can use a computed property that iterates over your data and checks if each item falls within the specified date range. First, define the start and end dates.

Then, create a computed property that filters the data array based on these dates using the Array.filter() method. Finally, bind the computed property to your template to display the filtered data. This approach allows you to dynamically update the filtered results whenever the dates change, providing a responsive and efficient filtering mechanism in Vuejs.

written

reviewed

updated

How can I filter data in Vuejs based on a range of dates?

This code snippet is an example of filtering items based on a date range using Vue.js. It displays a filter container with two date input fields and a list of items. When the user selects start and end dates, the filteredItems computed property filters the items array based on the selected date range.

If the dates are invalid (start date is greater than the end date), an error message is shown. The filtering is done by comparing the date of each item with the start and end dates using the filter function.

Vue Js filter between two dates Example

  <div id="app" class="filter-container">
   <h3 class="filter-subheading">Choose Date</h3>
   <input type="date" v-model="startDate" @change="validateDates" class="date-input" />
   <input type="date" v-model="endDate" @change="validateDates" class="date-input" />
   <ul class="filtered-list">
    <li v-for="item in filteredItems" :key="item.id" class="list-item">{{ item.name }}</li>
   </ul>
   <p v-if="invalidDates" class="error-message">Invalid date range</p>
  </div>
  <script type="module">
      const app = Vue.createApp({
        data() {
          return {
            startDate: "",
            endDate: "",
            items: [
              { id: 1, name: "Item 1", date: "2023-07-05" },
              { id: 2, name: "Item 2", date: "2023-07-08" },
              { id: 3, name: "Item 3", date: "2023-07-10" },
              { id: 4, name: "Item 4", date: "2023-07-12" },
              { id: 5, name: "Item 5", date: "2023-07-15" },
              { id: 6, name: "Item 6", date: "2023-07-18" },
              { id: 7, name: "Item 7", date: "2023-07-20" },
              { id: 8, name: "Item 8", date: "2023-07-22" },
              { id: 9, name: "Item 9", date: "2023-07-25" },
              { id: 10, name: "Item 10", date: "2023-07-28" },
              { id: 11, name: "Item 11", date: "2023-07-30" },
              { id: 12, name: "Item 12", date: "2023-08-02" },
              { id: 13, name: "Item 13", date: "2023-08-05" },
              { id: 14, name: "Item 14", date: "2023-08-08" },
              { id: 15, name: "Item 15", date: "2023-08-10" },
              { id: 16, name: "Item 16", date: "2023-08-12" },
              { id: 17, name: "Item 17", date: "2023-08-15" },
            ],
            invalidDates: false,
          };
        },
        computed: {
          filteredItems() {
            if (!this.startDate || !this.endDate || this.invalidDates) {
              return []; // Return an empty array if no date range specified or invalid dates
            }

            return this.items.filter((item) => {
              const itemDate = new Date(item.date);
              const start = new Date(this.startDate);
              const end = new Date(this.endDate);
              return itemDate >= start && itemDate <= end;
            });
          },
        },
        methods: {
          validateDates() {
            this.invalidDates = false;
            if (this.startDate && this.endDate) {
              const startDate = new Date(this.startDate);
              const endDate = new Date(this.endDate);
              if (startDate > endDate) {
                this.invalidDates = true;
              }
            }
          },
        },
      });

      app.mount("#app");
    </script>

Run

VueJs Tutorial

Vue Js filter between two dates | Creating a Filter for Start and End Dates

How can I filter data in Vuejs based on a range of dates?

Vue Js filter between two dates Example

Output of Vue Js filter between two dates

VueJs Tutorial

Vue Js filter between two dates | Creating a Filter for Start and End Dates

Feedback for Abhishek

How can I filter data in Vuejs based on a range of dates?

Vue Js filter between two dates Example

Output of Vue Js filter between two dates