I need the value :value to automatically update from inputValue.start to inputValue.end. This means that when I click on the end date, it should be reflected in the second text field. Similarly, if I select a date range in the second text field, the first text field should also update accordingly.
Below you can see the result of both scenarios.
P.S.: My implementation uses the V-Calendar plugin for Vue.js. The vc-date-picker element is part of this plugin.
- HTML:
<v-col v-for="(dateF, date_id) in datesF" :key="date_id + 'A'" cols="6" sm="3">
<vc-date-picker v-model="range" color="red" is-range :input-debounce="500" :min-date="new Date()">
<template v-slot="{ inputValue, inputEvents }">
<v-text-field
:value="inputValue.start"
v-on="inputEvents.start"
:label="dateF.label"
/>
</template>
</vc-date-picker>
</v-col>- Script:
<script>
export default {
name: "Home",
data: () => ({
datesF: [
{ label: "Start Date", val: "start" },
{ label: "End Date", val: "end" },
],
range: {
start: new Date(),
end: new Date(),
},
}),
};
</script>What I have attempted:
did not solve the issue.:value="inputValue + '.' + dateF.val"EDIT: I have found that without using
v-forand having twov-text-field, the solution works. However, I prefer to usev-foras it allows me to align the text fields in one line. Despite several attempts, I couldn't get it to work withv-for. It seems to only work with an individualv-text-field, but I am determined to find a solution withv-for.
Temporary Solution (with v-for)
Please refer to @Gurkan Ugurlu's answer below.
- The limitation of this temporary fix: There is no live update. Refer to this GIF.
For Live Update based on my original code:
My initial code simply outputs the data for testing purposes, which has been successful so far. Each time a date range is selected, console.log displays the current dates.
watch: {
range: {
handler: function () {
console.log(this.range.start.toLocaleDateString());
console.log(this.range.end.toLocaleDateString());
},
},
},