flylocal-web/components/DatePicker.vue

<template>
  <div class="calendar-wrapper">
    <div>
      <label for=""> Local Airline </label>
      <h1>
        {{ selectedSchedule.Carrier_Name }}
      </h1>
    </div>
    <div>
      <label for=""> Departs </label>
      <div>
        {{ selectedSchedule.Departure_TimeL }}
      </div>
    </div>
    <div>
      <label for=""> Arrives </label>
      <div>
        {{ selectedSchedule.Arrival_TimeL }}
      </div>
    </div>
    <div>
      <label for=""> Available Until </label>
      <div>
        {{ selectedSchedule.Effective_End }}
      </div>
    </div>
    <div>
      <label for="">How Many Adults?</label>
      <v-select
        v-model="numAdult"
        :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
      />
    </div>
    <div>
      <label for="">How Many Children?</label>
      <v-select
        v-model="numChild"
        :options="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
      />
    </div>
    <Calendar
      v-for="date in startingDates"
      :key="date.toString()"
      :date="new Date(date)"
      :selected-days="selectedDays"
      @book="book"
    />
  </div>
</template>

<script>
export default {
  props: {
    startingDate: {
      type: [Date],
      default () {
        return new Date()
      }
    },
    selectedSchedule: {
      type: [Object],
      default () {
        return {}
      }
    },
    selectedDays: {
      type: [Array],
      default () {
        return []
      }
    }
  },
  data () {
    return {
      numberOfMonths: 4,
      numAdult: 1,
      numChild: 0
    }
  },
  computed: {
    startingDates () {
      const listOfDates = []
      for (let index = 0; index < this.numberOfMonths; index++) {
        const thisDate = new Date(this.startingDate.getFullYear(), this.startingDate.getMonth() + index, 1)
        listOfDates.push(thisDate)
      }
      return listOfDates
    }
  },
  methods: {
    book (thisDate) {
      window.open(`https://www.anrdoezrs.net/links/100449149/type/am/https://www.expedia.com/go/flight/search/oneway/${this.formatDate(thisDate)}/${this.formatDate(thisDate)}?langid=1033&FromAirport=${this.selectedSchedule.Origin_IATA}&FromTime=${this.selectedSchedule.Departure_TimeL}&ToTime=${this.selectedSchedule.Arrival_TimeL}&ToAirport=${this.selectedSchedule.Destination_IATA}&Class=3&NumAdult=${this.numAdult}&NumChild=${this.numChild}`)
    },
    formatDate (thisDate) {
      return thisDate.toLocaleDateString('en-CA')
    }
  }
}
</script>

<style>
.calendar-wrapper {
  color: black;
}
</style>