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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
  </head>

<body>
  <div id="app" class="filter-container">
   <h2 class="filter-heading">Vue Js filter between two dates</h2>
   <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>

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>
    <style scoped>
       .filter-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

.filter-heading {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
      }

.filter-subheading {
        font-size: 18px;
        color: #555;
        margin-bottom: 10px;
      }

.date-input {
        width: 200px;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 10px;
      }

.filtered-list {
        list-style: none;
        padding: 0;
      }

.list-item {
        font-size: 16px;
        color: #555;
        margin-bottom: 5px;
      }

.error-message {
        font-size: 16px;
        color: red;
        margin-top: 10px;
      }
    </style>
  </body>
</html>