chrisgrim
292
6
Vue

Trouble understanding how a vue Plugin is working

Posted 2 months ago by chrisgrim

Hi, I am using the air bnb date picker vue plugin in my project. It works great until I try to have two versions on the same page. I want a user to be able to click to add one date and then click a second date.

Following the instructions I loaded it into my app.js file like so

// 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)

I then created a new vue component called create-datepicker and inside there I was able to get it working by using this code

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

      <AirbnbStyleDatepicker
        :trigger-element-id="'datepicker-trigger'"
        :mode="'range'"
        :fullscreen-mobile="true"
        :date-one="dateOne"
        :date-two="dateTwo"
        @date-one-selected="val => { dateOne = val }"
        @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: {
    formatDates(dateOne, dateTwo) {
      let formattedDates = ''
      if (dateOne) {
        formattedDates = format(dateOne, this.dateFormat)
      }
      if (dateTwo) {
        formattedDates += ' - ' + format(dateTwo, this.dateFormat)
      }
      return formattedDates
    }
  }
}
</script>

Then I tried to edit the code so I could have two different date pickers like so

<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>

It does show two date pickers but when I click on one of them and select a date the other one disappears. How do I make two complete standalone versions?

Thanks!

Please sign in or create an account to participate in this conversation.