Öffnen und schließen Sie den vue-ctk-date-time-picker mit einem Klick auf die Vue-Schaltfläche

Question

Ich verwende die Komponente - https://github.com/chronotruck/vue-ctk-date-time-picker in meiner Komponente. Das Problem, das ich habe, ist, dass ich die Komponente beibehalten möchte, aber irgendwo in meiner Komponente sollte ich sie ein- und ausschalten können. Offenbar bietet die Komponente keine solche Funktionalität. Kann mir jemand helfen?

Code-Sandbox – Sanbox

Was ich mache -

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

Dieser Knopf muss sich außerhalb der Komponente befinden und sollte in der Lage sein, den Selektor zu öffnen und zu schließen.

Referenztatsächliche Anwendungsfälle sind wie folgt

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

Die Umschalttaste sollte die Datumsauswahl ein- und ausschalten.

Danke für jede Hilfe.

Answer 1

---编辑---

将ref="pickerRef"添加到您的日期选择器组件中

并按照以下代码修改您的<button>，以触发和隐藏日期选择器。

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