Ouvrez et fermez vue-ctk-date-time-picker en utilisant le bouton Vue en cliquant sur

Question

J'utilise le composant - https://github.com/chronotruck/vue-ctk-date-time-picker dans mon composant. Le problème que j'ai est que je veux garder le composant le même, mais quelque part dans mon composant, je devrais pouvoir l'activer et le désactiver, il semble que le composant ne fournisse pas une telle fonctionnalité, quelqu'un peut-il m'aider.

Code Sandbox - Sanbox

Ce que je fais -

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

Ce bouton doit être extérieur au composant et doit pouvoir ouvrir et fermer le sélecteur.

Les cas d'utilisation réels de référence sont les suivants

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

Le bouton bascule doit activer et désactiver le sélecteur de date.

Merci pour toute aide.

Answer 1

---Modifier---

Ajoutez ref="pickerRef" à votre composant datepicker

et modifiez votre <button> selon le code ci-dessous pour déclencher et masquer le sélecteur de date.

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