npm 在Vue中使用按钮单击打开和关闭vue-ctk-date-time-picker

68de4m5k  于 2023-08-06  发布在  其他
关注(0)|答案(1)|浏览(80)

我在我的组件中使用了组件-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>


切换按钮应可打开和关闭日期选取器。
如有任何帮助,我们将不胜感激

pprl5pva

pprl5pva1#

-已编辑-
ref="pickerRef"添加到日期选择器组件
并修改您的<button>,如以下代码所示,以触发和隐藏日期选择器。

<vue-ctk-date-time-picker
      v-model="theDate"
      ref="pickerRef"
      :name="'Date'"
      :format="'YYYY-MM-DD'"
      :formatted="'DD MMM, YYYY'"
      :only-date="true"
      :data-vv-as="'date'"
      :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"
>
    Open
</button>

字符串

相关问题