Buka dan tutup vue-ctk-date-time-picker menggunakan klik butang Vue

Question

Saya menggunakan komponen - https://github.com/chronotruck/vue-ctk-date-time-picker dalam komponen saya. Masalah yang saya hadapi ialah saya ingin mengekalkan komponen yang sama tetapi di suatu tempat dalam komponen saya, saya sepatutnya dapat menghidupkan dan mematikannya, nampaknya komponen itu tidak menyediakan sebarang fungsi sedemikian, sesiapa boleh membantu.

Kod Sandbox - Sanbox

Apa yang saya lakukan -

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <vue-ctk-date-time-picker
      v-model="theDate"
      :name="'Date'"
      :format="'YYYY-MM-DD'"
      :formatted="'DD MMM, YYYY'"
      :only-date="true"
      :data-vv-as="'date'"
      :first-day-of-week="1"
      :range="true"
    >
    </vue-ctk-date-time-picker>
    <button>Open</button>
  </div>
</template>

Butang ini perlu berada di luar komponen dan seharusnya boleh membuka dan menutup pemilih.

Rujukan kes penggunaan sebenar adalah seperti berikut

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <vue-ctk-date-time-picker
      v-model="theDate"
      :name="'Date'"
      :format="'YYYY-MM-DD'"
      :formatted="'DD MMM, YYYY'"
      :only-date="true"
      :data-vv-as="'date'"
      :first-day-of-week="1"
      :no-value-to-custom-elem="false"
      :range="true"
    >
      <input type="text" /><button>Toggle</button>
    </vue-ctk-date-time-picker>
  </div>
</template>

Butang togol harus menghidupkan dan mematikan pemilih tarikh.

Terima kasih atas sebarang bantuan.

Answer 1

---Edit---

Tambahkan ref="pickerRef" pada komponen pemetik tarikh anda

dan ubah suai <button> anda mengikut kod di bawah untuk mencetus dan menyembunyikan pemilih tarikh.

<vue-ctk-date-time-picker
      v-model="theDate"
      ref="pickerRef"
      :name="'日期'"
      :format="'YYYY-MM-DD'"
      :formatted="'DD MMM, YYYY'"
      :only-date="true"
      :data-vv-as="'日期'"
      :first-day-of-week="1"
      :range="true"
      :no-value-to-custom-elem="false"
    >
</vue-ctk-date-time-picker>
<button
    type="button"
    @click="$refs.pickerRef.toggleDatePicker(), ($refs.pickerRef.persistent = true)"
    @blur="$refs.pickerRef.persistent = false"
>
    打开
</button>