v-calendar: Input value doesn't update after a manual change of the date

If you still can’t fix it. This must work. If you update the range data using a method it will not re-render the Date-Picker component. So an easy fix is to add a key to the Date-Picker component and change the key every time you change the date from the method.

<Date-Picker
  :key="datePickerKey"
  v-model="range"
  is-range
/>

data(){
    datePickerKey: 0,
}

methods: {
    resetRange() {
      this.range.start = null  //or a date
      this.range.end = null // or a date
      this.calendarKey++;
    },
}

Experiencing this too. I ended up using value from computed / pass the value to computed first.

 <v-date-picker 
        :columns="$screens({ default: 1, lg: 2 })" 
        is-range 
        :value="dateRange"
        :attributes="attrs"
        :max-date='new Date()'
        v-model="dateRange"
      />

computed: {
 dateRange: {
      set (val) {
         // action after date change here
      },
      get () {
        let range = {
          start: new Date(moment().subtract(7, 'day').format('YYYY-MM-DD')), 
          end: new Date(moment().format('YYYY-MM-DD'))
        }
        // action after receives date from props
        return range
      }
    }
}

Previously I used value from data() and it didnt work, but when value comes from props it works and also works on props change

In my case, I have a ‘range’ type. I set up the start and end value by code but I don’t know what to do to refresh the input, currently looking.

This is how I did, In case someone encounter the same problem:

<vc-date-picker
  v-model="range"
  mode="date"
  is-range
  :max-date="new Date()"
>
<template v-slot="{ inputValue, inputEvents, updateValue }">
....
<button @click="updateValue(quickFilter(30, 'days'))">
...
</template>
</vc-date-picker>

Here, quickFilter returns object containing start and end properties.

quickFilter(amount, time) {
  return {
      start: this.$moment().subtract(amount, time).toDate(),
      end: new Date()
  };
},

If you still can’t fix it. This must work. If you update the range data using a method it will not re-render the Date-Picker component. So an easy fix is to add a key to the Date-Picker component and change the key every time you change the date from the method.

<Date-Picker
  :key="datePickerKey"
  v-model="range"
  is-range
/>

data(){
    datePickerKey: 0,
}

methods: {
    resetRange() {
      this.range.start = null  //or a date
      this.range.end = null // or a date
      this.calendarKey++;
    },
}

Yes definitely did the trick. However I do not like the fact that it is not updating automatically.

@parthjani7 this answer is awesome! Thank you

call this.$forceUpdate()

Experiencing this too. I ended up using value from computed / pass the value to computed first.

 <v-date-picker 
        :columns="$screens({ default: 1, lg: 2 })" 
        is-range 
        :value="dateRange"
        :attributes="attrs"
        :max-date='new Date()'
        v-model="dateRange"
      />

computed: {
 dateRange: {
      set (val) {
         // action after date change here
      },
      get () {
        let range = {
          start: new Date(moment().subtract(7, 'day').format('YYYY-MM-DD')), 
          end: new Date(moment().format('YYYY-MM-DD'))
        }
        // action after receives date from props
        return range
      }
    }
}

Previously I used value from data() and it didnt work, but when value comes from props it works and also works on props change

If you set value for dateRange manually, inside a method lets say. This will trigger which I don’t want to happen.

Experiencing this too. I ended up using value from computed / pass the value to computed first.

 <v-date-picker 
        :columns="$screens({ default: 1, lg: 2 })" 
        is-range 
        :value="dateRange"
        :attributes="attrs"
        :max-date='new Date()'
        v-model="dateRange"
      />

computed: {
 dateRange: {
      set (val) {
         // action after date change here
      },
      get () {
        let range = {
          start: new Date(moment().subtract(7, 'day').format('YYYY-MM-DD')), 
          end: new Date(moment().format('YYYY-MM-DD'))
        }
        // action after receives date from props
        return range
      }
    }
}

Previously I used value from data() and it didnt work, but when value comes from props it works and also works on props change

can confirm this still does the trick, thank you!