In my scenario, there are 2 instances of the <date-picker>. The first instance is used for capturing the start date (starts_at), while the second instance captures the end date (ends_at).
According to the design I have envisioned, I would like to initially disable the ends_at instance and then re-enable it once the starts_at has been selected.
Here is the code for my starts_at instance:
<date-picker v-model="starts_at" @input="enableEndsAt()" valueType="format"></date-picker>
And here is the code for my ends_at instance:
<date-picker id="endsAt" v-model="ends_at" disabled @input="checkDate()" valueType="format"></date-picker>
I have attempted an approach where changing the input triggers the enableEndsAt() function. Here is how the function looks:
enableEndsAt(){
if(this.starts_at === "") {
return
}
var element = document.querySelector('#endsAt')
element.removeAttribute('disabled')
console.log(element)
}