talkhabi/vue-persian-datetime-picker

Custom Input bug when using 2 at the same time

alireza0sfr opened this issue · 1 comments

Hey
in a vue 2 project, I created a date component from your package and used custom-input prop, and when I wanted to use 2 date pickers on the same page 2 popups were rendered by clicking on each picker and the second picker date didnt work

PS: this happened on both editable and non editable mode

Live Example: https://codesandbox.io/s/lucid-keldysh-fybwt?file=/src/App.vue

Hi @alireza0sfr
Bug fixed; but you must provide a specific query selector for each component.
See this example:

<template>
  <div>
    <input type="text" :class="inputClass" />
    <DatePicker v-model="localData.selectedDate" popover :custom-input="`.${inputClass}`" />
  </div>
</template>

<script>
import DatePicker from 'vue-persian-datetime-picker'
export default {
  components: {
    DatePicker,
  },
  data() {
    return {
      localData: {
        selectedDate: '',
      },
    }
  },
  computed: {
    inputClass() {
      return `nikan-datetime-input-${this._uid}`
    },
  },
}
</script>