Multiple Versions of airbnb style date picker in one component

[chrisgrim]

Hi Mikael, I just want to say this datepicker is beautiful! I was able to get it working but I am having some trouble having two different versions of the airbnb date picker in one vue component. I am pretty sure it's because of how I am loading it so I was hoping I could get your eyes on it. In my app.js file I have

// import component and stylesheet
import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker'

import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'

// make sure we can use it in our components
// see docs for available options
const datepickerOptions = {}

// make sure we can use it in our components
Vue.use(AirbnbStyleDatepicker, datepickerOptions)

then inside of a vue component I have named datepicker I put

<template>
  <div>
    <div class="datepicker-trigger">
      <input
        type="text"
        id="datepicker-trigger"
        placeholder="Select dates"
        :value="formatFirstDate(dateOne)"
      >

      <AirbnbStyleDatepicker
        :trigger-element-id="'datepicker-trigger'"
        :closeAfterSelect="false"
        :mode="'single'"
        :monthsToShow="1"
        :fullscreen-mobile="true"
        :startOpen="true"
        :date-one="dateOne"
        @date-one-selected="val => { dateOne = val }"
      />
    </div>

    <div class="datepicker-trigger">
      <input
        type="text"
        id="datepicker-trigger1"
        placeholder="Select dates"
        :value="formatSecondDate(dateTwo)"
      >

      <AirbnbStyleDatepicker
        :trigger-element-id="'datepicker-trigger1'"
        :closeAfterSelect="false"
        :mode="'single'"
        :monthsToShow="1"
        :fullscreen-mobile="true"
        :startOpen="true"
        :date-two="dateTwo"
        @date-two-selected="val => { dateTwo = val }"
      />
    </div>

  </div>
</template>

<script>
import format from 'date-fns/format'

export default {
  data() {
    return {
      dateFormat: 'D MMM',
      dateOne: '',
      dateTwo: ''
    }
  },
    methods: {
        formatFirstDate(dateOne) {
            let formattedDates = ''
                if (dateOne) {
                    formattedDates = format(dateOne, this.dateFormat)
                } 
            return formattedDates
        },

        formatSecondDate(dateTwo) {
            let formattedDates = ''
                if (dateTwo) {
                    formattedDates = format(dateTwo, this.dateFormat)
                } 
            return formattedDates
        },
    },
}
</script>

I would to know how badly I have messed your date picker and how I should correctly set it up.

Thanks so much

[chrisgrim]

I was able to solve this by adding :key="1" and :key="2" to my different datapickers.