set date range programmatically

[syamsoul]

I initiate the datepicker with default value, and it is working fine....

data: function(){
    return {
        date: ['01 Jan 2022', '10 Jan 2022'], 
    };
},

..this is working fine...

the string value in the input field will become 01 Jan 2022 ~ 10 Jan 2022...

.

but when I update the model value, it is not working

methods:{
    updateDate()
    {
        this.date = ['20 Jan 2022', '26 Jan 2022'];
    }
}

the string value in the input field still show previous value 01 Jan 2022 ~ 10 Jan 2022...

i expected the string value in the input field become 20 Jan 2022 ~ 26 Jan 2022.. but it's not

how to solve this?

[syamsoul]

just to share my current solution that i did, and this is just temporary workaround only, and i hope there's a practical solution..

.

my temporary workaround is

• after i set the new value to the model value, i also programmatically change the string value inside the input field also

methods:{
    updateDate()
    {
        this.date = ['20 Jan 2022', '26 Jan 2022'];
        this.$refs.date_picker_field.pickerValue = this.date.join(this.$refs.date_picker_field.separator);
    }
}

[desmondchoon]

just to share my current solution that i did, and this is just temporary workaround only, and i hope there's a practical solution..

.

my temporary workaround is

• after i set the new value to the model value, i also programmatically change the string value inside the input field also

methods:{
    updateDate()
    {
        this.date = ['20 Jan 2022', '26 Jan 2022'];
        this.$refs.date_picker_field.pickerValue = this.date.join(this.$refs.date_picker_field.separator);
    }
}

So far this workaround is great, but is missing the calendar's portion where it should show the calendar on the date and month of the updated value. currently it still stays at today's month and day despite the change in value.