yaviner
commented
3 weeks ago Hi, I ran into the same issue and couldn't find a v-calendar native way to do it. Forcing a complete re-render of the component worked for me, however!
I used the "key changing" technique referenced here https://michaelnthiessen.com/force-re-render
Set up the calendar as: <date-picker :key="calendarKey" v-model="range"/>. Initialize calendarKey with a value of 0. Then, wherever range is updated programmatically, increment calendarKey.
Hey, I'm trying to modify the selected range of dates made by user on DatePicker if it doesn't respect some rules (for instance, no more than 7 days range is allowed) I'm doing so by changing the start and end properties of the model associated with the DatePicker element using "watch" section to watch changes to dates model since @update function is not working.
<DatePicker v-model.range="dates" />And then change start and endthis.dates.start=this.moment(XXX)this.dates.end=this.moment(XXX)However, this doesn't change the visual selection on the component UI and the previous selection is maintained which might be confusing to the user. How to make DatePicker reactive to changes to the model range or at least trigger these changes programmatically to be reflected on the DatePicker element. Also how to make @update function work? Ps: i tried the following solution but it still didnt work // FAILS - Setting each value separatelythis.range.start = new Date(this.$moment().startOf('day')) this.range.end = new Date(this.$moment().add(6, 'days').endOf('day'))// FAILS - Setting entire object at once
this.range = { start: new Date(this.$moment().startOf('day')), end: new Date(this.$moment().add(6, 'days').endOf('day'))}Thanks