Currently, I am utilizing the Vue component - https://github.com/chronotruck/vue-ctk-date-time-picker within my own component. However, I am encountering an issue where I would like to maintain the component's original functionality while having a button outside of it to open and close it. It appears that the component does not have this feature built-in, so I am seeking assistance from anyone who could help with this.
You can view the code sandbox for reference here - Sanbox
Here is what I am currently implementing:
<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>
The goal is to have a button external to the component that opens and closes the picker.
To give you more insight, here is the desired scenario:
<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 control the visibility of the date picker.
Any assistance on this matter would be greatly appreciated.