Open and close vue-ctk-date-time-picker using Vue button click

Question

I am using component - https://github.com/chronotruck/vue-ctk-date-time-picker in my component. The problem I'm having is that I want to keep the component the same but somewhere in my component I should be able to turn it on and off, it seems the component doesn't provide any such functionality, can anyone help.

Code Sandbox - Sanbox

What I'm doing -

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

This button needs to be outside the component and should be able to open and close the selector.

Reference actual use cases are as follows

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

The toggle button should open and close the date picker.

Thanks for any help.

Answer 1

---edit---

Add ref="pickerRef" to your date picker component

And modify your <button> as follows to trigger and hide the date picker.

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