v-date-picker set dates range programatically.

[dieptang]

Hello,

I have the control:

<v-date-picker ref="calendar" @dayclick="day_clicked" :min-date="new Date()" color="red" :columns="$screens({ default: 1, lg: 2 })" is-expanded id="hotel_search_calendar" locale='vi' v-model="range" is-range>
                                            </v-date-picker>

day_clicked function, I want to set dates range.end programatically. But seem the UI not updating. here is the JS:

 new Vue({
            el: '#hotel_search_calendar',
            methods: {

                day_clicked(day) {
                    if (!day.isDisabled) {
                        this.clicks++;

                        if (this.clicks === 1) {
                            this.range.start = day.date;
                            this.temp_date = day.date;

                            $('#hotel_search_start').html(moment(day.date).format(this.format));
                        } else if (this.clicks === 2) {
                            // Reset clicks and range for the next selection
                            if (moment(day.date).isSame(this.temp_date, 'day')) {
                              //Here I want to update the range.end = now + 1 day, But the UI from the calendar not update.
                              //====>
                                 this.range.end = moment(day.date).add(1, 'days');

                            }

                            if (day.date < this.temp_date) {
                                this.range.end = this.temp_date;
                                this.range.start = day.date;
                            } else {
                                this.range.end = day.date;
                            }
                            //this.range = {start: '2024-01-01', end: '2024-01-02' }; //new Date(2024, 01, 01);
                            // const calendar = this.$refs.calendar;
                            // calendar.selectedDate( '2024-02-02');

                            //this.attributes[0].range.end = '2024-01-02';
                        } 
                    }
                }
            },
            data() {
                return {
                    format: 'ddd, D [tháng] MM',
                    temp_date: null,
                    clicks: 0,
                    range: {
                        start: null,
                        end: null,
                    },
                }
            }
        });

Result:

I want it auto select 22-23 on the picture above. Thanks

[mreduar]

@dieptang Did you find a solution?

[KacemRostom]

Any answer to this?