[BUG] is-inline with masks didn't deselect previously selected days on date picker

[ReWWeR]

If you set :masks property for date picker you will be unavailable to deselect previously selected value in calendar.

Steps to reproduce:

1. open https://jsfiddle.net/q4k9d7es/
2. Select some days
3. You will see that mode is single, the date in v-model is only one, but in calendar you will see active all clicked days

[Excalibaard]

I've also been experiencing this bug. Hadn't been able to figure out the cause until this issue, so thanks!

For me it also seems to be a problem with the locale prop, as when I set :locale="{ id: $root.$i18n.locale }" to work with my translation engine (removed the masks setting for brevity)., I have the same behavior. When removing the locale prop, things work as expected.

EDIT: when using a string locale e.g. locale="nl-NL", set either statically or dynamically, I get the expected behavior with dates being deselected. The bug seems to be related to props that receive an object. Modified fiddle from OP: https://jsfiddle.net/d7jtve1L/13/

I use v 1.0.0-beta.22 (because of installing issues with newer versions).

[olgadr]

Is there an estimate of when this issue will be fixed? Thanks

[contractorwolf]

this is a major issue ion my project as well, how do I reset or redraw teh calendar after Dates have been removed from the attributes of the date selection has been removed from the v-model?

[andreitobias]

If anyone still has this issue, here's what worked for me on v 1.0.8

1. Define a default locale as stated in the docs like so: Vue.use(VCalendar, { locales: { "en-EN": { firstDayOfWeek: 1, masks: { weekdays: "WWW" } } } });

2. Then, all you need to do is reference your locale when using the calendar component.

<v-date-picker locale="en-EN" />

[contractorwolf]

If anyone still has this issue, here's what worked for me on v 1.0.8

1. Define a default locale as stated in the docs like so: Vue.use(VCalendar, { locales: { "en-EN": { firstDayOfWeek: 1, masks: { weekdays: "WWW" } } } });
2. Then, all you need to do is reference your locale when using the calendar component.

<v-date-picker locale="en-EN" />

Seriously @andreitobias, I thought I was losing my mind trying to figure out how to reset the calendar on the date range picker. Just happened to find your fix in here, had no idea it was a real bug and didnt even think of testing without the mask until I saw this. Thank you! Solved my issue.

[pixeldemon9]

Thanks to @Excalibaard's hint, I discovered that if you define the mask value as a variable, and then pass it to the prop, it works as expected. Passing the config object directly to the mask prop inline breaks the multiple-mode functionality.

This works: <date-picker v-model="row.form_dates" mode="multiple" :masks="mask" />

data: function () { return { mask: { input: "YYYY-MM-DD" }, } },

@contractorwolf