使用Vue按鈕點擊來開啟和關閉vue-ctk-date-time-picker

Question

我正在使用元件 - https://github.com/chronotruck/vue-ctk-date-time-picker 在我的元件中。我遇到的問題是，我希望保持組件不變，但在我的組件中的某個地方應該能夠打開和關閉它，似乎組件沒有提供任何這樣的功能，有人可以幫助嗎。

程式碼沙箱 - Sanbox

我正在做的事情 -

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

這個按鈕需要在元件外部，並且應該能夠開啟和關閉選擇器。

參考實際用例如下

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

切換按鈕應該會開啟和關閉日期選擇器。

感謝任何幫助。

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>