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

[ligiab]

I have created a simple v-date-picker. Once I change the date manually, selecting a new date using the mouse is not triggering the update of the input value anymore.

<v-date-picker mode='single' v-model='selectedValue'> </v-date-picker>

PS. I have seen that with Version 0.9.7 this thing was working.

[cwilby]

Experiencing this too, hard to debug as there are no error messages. Thinking it has something to do with the updateValue function disabling input format when the input event occurs.

https://github.com/nathanreyes/v-calendar/blob/26922cd5fb9f480b2e824b490ce5d815d2d8c049/src/components/DatePicker.vue#L443-L478

[najuste]

I finally figured,, that if wishing to update the value manually (so I have buttons for the next and previous day), one needs in v-date-picker pass the updateValue as prop in the slot-scope.

Provide a default slot for v-date-picker. Be sure to extract out the following props by using slot-scope:

• updateValue | Function | Call to update the value at the time of your choosing.

But what is not written in the docs, that this function (as in comment line 451) expects either a string(!) that is going to be replaced as input Value, or a date object but as date object needs to be parsed, one needs to pass a configuration object as second argument with a key: formatInput = true

updateValue(new Date(newDate), {
formatInput: true
});

[mathias22osterhagen22]

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.

[quaidesbalises]

@mathias22osterhagen22 Did you find a solution ? Currently in the same case

[najuste]

I haven't tried with a range, but maybe the same solution - passing an option object to format the value would work ?

-- html

<v-date-picker v-model='range'>
 <div slot-scope='{ inputValue, updateValue, hidePopover }'>
<b-input :value='inputValue'> </b-input>
 <button @click="updateRange(updateValue); hidePopover()">
</div>
</v-date-picker>

---js

//definition from v-calendar
range: {
        start: new Date(2018, 0, 16), // Jan 16th, 2018
        end: new Date(2018, 0, 19)    // Jan 19th, 2018
      }

updateRangeDayPeriod(updateValue){
// set a new range
this.range {
        start: new Date(2020, 0, 1),
        end: new Date()
      }
// call a passed function with obj and formatInput
updateValue(this.range, {
            formatInput: true,
        });
}

[karipeltola]

For me setting formatInput did not work with a range, I only got to update it by converting both the start and end date to strings.

[burhanahmeed]

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