Vue Js Get All Dates Between Two Dates

<!DOCTYPE html>
<html lang="en">

<body>
  <div id="app">
    <h3>Vue Js Get All Dates Between Two Dates</h3>
    <div>
      <label for="start-date">Start Date:</label>
      <input type="date" id="start-date" v-model="startDate" @change="validateInput">
      <div v-if="startDateError" class="error">{{ startDateError }}</div>
    </div>
    <div>
      <label for="end-date">End Date:</label>
      <input type="date" id="end-date" v-model="endDate" @change="validateInput">
      <div v-if="endDateError" class="error">{{ endDateError }}</div>
    </div>
    <ul>
      <li v-for="date in dateArray" :key="date">{{ formatDate(date) }}</li>
    </ul>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          startDate: '',
          endDate: '',
          dateArray: [],
          startDateError: '',
          endDateError: '',
        };
      },
      watch: {
        startDate() {
          this.getDates();
        },
        endDate() {
          this.getDates();
        },
      },
      methods: {
        getDates() {
          if (this.startDate && this.endDate) {
            const start = new Date(this.startDate);
            const end = new Date(this.endDate);
            const days = Math.floor((end - start) / (1000 * 60 * 60 * 24));
            this.dateArray = [];
            for (let i = 0; i <= days; i++) {
              const currentDate = new Date(start.getTime() + (i * 24 * 60 * 60 * 1000));
              this.dateArray.push(currentDate);
            }
          }
        },
        formatDate(date) {
          const day = date.getDate().toString().padStart(2, '0');
          const month = (date.getMonth() + 1).toString().padStart(2, '0');
          const year = date.getFullYear().toString();
          return `${day}/${month}/${year}`;
        },
        validateInput() {
          const start = new Date(this.startDate);
          const end = new Date(this.endDate);
          this.startDateError = '';
          this.endDateError = '';
          if (start > end) {
            this.startDateError = 'Start date must be before end date';
          }
        },
      },
    });
  </script>
  <style scoped>
    /* Center the content of the app div */
    #app {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
    }

/* Style for the h2 tag */
    h2 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }

/* Style for the input fields */
    input[type="date"] {
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
      font-size: 16px;
    }

/* Style for the error message */
    .error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }

/* Style for the list items */
    li {
      font-size: 16px;
      margin-bottom: 5px;
    }
  </style>
</body>

</html>