<div id="app">
  <date-selector title="Date 1" @date-change="compareDates"></date-selector>
  <date-selector title="Date 2" @date-change="compareDates"></date-selector>
  <h2 v-if="sameDay">They are the same day!</h2>
  <h2 v-if="later">{{ later }} comes later</h2>
</div>

html, body {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100%;
}

#app {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr;
}

h1 {
  text-align: center;
}

const DateTime = luxon.DateTime
const Info = luxon.Info

const app = Vue.createApp({
  data: function () {
    return {
      date1: {},
      date2: {},
      sameDay: false,
      later: ''
    }
  },
  methods: {
    compareDates: function () {
      if (date1.hasSame(date2, 'day')) {
        this.sameDay = true
      } else if (date1 > date2) {
        this.sameDay = false
        this.later = 'Date 1'
      } else {
        this.sameDay = false
        this.later = 'Date 2'
      }
    }
  }
})

app.component('date-selector', {
  props: ['title'],
  data: function () {
    return {
      months: Info.months(),
      years: [2021, 2022, 2023, 2024, 2025],
      selectedMonth: 3,
      selectedYear: 2021,
      selectedDay: 1
    }
  },
  computed: {
    days: function () {
      return DateTime.local(this.selectedYear, this.selectedMonth).daysInMonth
    },
    date: function () {
      return DateTime.local(this.selectedYear, this.selectedMonth, this.selectedDay)
    }
  },
  watch: {
    date: function (date) {
      this.$emit('date-changed', date)
    }
  },
  template: `
  <div class="date-selector">
    <h4>{{ title }}</h4>
    <select v-model="selectedMonth">
      <option v-for="(month, index) in months"
            :value="index + 1">{{ month }}</option>
    </select>
    <select v-model="selectedYear">
      <option v-for="year in years"
              :value="year">{{ year }}</option>
    </select>
    <select v-model="selectedDay">
      <option v-for="day in days"
              :value="day">{{ day }}</option>
    </select>
  </div>
  `
})

const vm = app.mount('#app')