V-calendar: Disabled dates not working or ?

[jfustier-it]

Hello,

I try to set disabled-dates in my v-date-picker, but i've this error : You may have an infinite update loop in watcher with expression "disabledAttribute"

<v-date-picker mode='range'  v-model="rangeDate" :min-date='new Date()' :disabled-dates="disabledDates">
</v-date-picker>

The disabled dates are returned by a http request and stored in my component :

[{start: xxxx, end: xxxx}, {start: xxxx, end: xxxx}]

The link of documentation: https://vcalendar.io/guide/#include-vs-exclude-dates

[alexmare93]

Same Problem, any further solution?

thank you

[jfustier-it]

I changed the module for : https://github.com/ManukMinasyan/vue-functional-calendar

You can pass disabled dates (no range dates)

[ilikerobots]

Disabled and available dates are working for me, but only after I read https://github.com/nathanreyes/v-calendar/issues/203 which describes some nuances in how you can use them and min-date together (or rather, how you can't).

[thomashdk]

@jfustier-it Did you get it to work ??

[jfustier-it]

no, I just changed the module

[EVOSandru6]

Hello.
It`s problem when defined :min-date and :disabled-dates='ranges'.
Where ranges is property array.

If removed one of them, all be right.

FAIL:

v-model="localDate.started_at"
:mode="mode"
:disabled-dates='ranges'
:min-date='new Date()'
is-inline
/>

NOT FAIL:

v-model="localDate.started_at"
:mode="mode"
:disabled-dates='ranges'
is-inline
/>

NOT FAIL:

v-model="localDate.started_at"
:mode="mode"
:min-date='new Date()'
is-inline
/>

min-date and disabled-dates are not friends ((((

"v-calendar": "^1.0.3",

[e-wag]

Hello there,
I was able to fix the problem for me.

1. I am setting a computed value for the v-model with an empty setter method.
2. I am setting the desired disabled dates in a computed method as well and create a new array for them.
   For whatever reason these two things in combination fix the infinite loop problem

This is how my v-calendar looks like
<v-date-picker :min-date="new Date()" :disabled-dates="getDisabledDates" visibility="focus" id="zeitraumId" v-model.trim="parseZeitraum" :class="{'is-invalid': !isZeitraum && isZeitraumInitialized, 'is-valid': isZeitraum && isZeitraumInitialized}" mode="range" :popover="{visibility: 'focus', placement: 'auto'}"> <input slot-scope="{inputProps, inputEvents}" v-bind="inputProps" v-on="inputEvents" @keydown="isZeitraumInitialized = true" @focusout="onZeitraumFocusOut" class="form-control" :placeholder="getDateFormat + ' - ' + getDateFormat" :class="{'is-invalid': !validateZeitraum(inputProps) && isZeitraumInitialized, 'is-valid': validateZeitraum(inputProps) && isZeitraumInitialized}"> </v-date-picker>

And these are my two computed methods I use:

parseZeitraum: { get(){ return this.validatorObj.zeitraum.$model }, set(){}

getDisabledDates: function () { let dates = []; for (let i = 0; i < this.disabledDates.length; i++) dates.push(this.disabledDates[i]) return dates; }

Hope, it helps someone looking for a solution

[kostia7alania]

RANGE DOESN'T WORK !!!!!!!!!!!!!!!!!!!!!
<v-date-picker mode="datetime" :value="form.dates" :is-range="true" />

[kostia7alania]

sorry! It's started work after updating to 1.1.1
Cuz Yarn installed by default the old one - ver 1.0.8 (!

[nathanreyes]

Tested as of 2.2.1 but probably was fixed in an earlier version.

Example

  <v-date-picker
    v-model="range"
    :min-date="new Date()"
    :disabled-dates="disabledDates"
    is-range
  />

export default {
  data() {
    return {
      range: null,
      disabledDates: [
        { start: new Date(2021, 1, 9), end: new Date(2021, 1, 19) },
      ],
    };
  },
};

There has also been a new section added for clarifying how disabled-dates and available-dates work when used together.
https://vcalendar.io/disable-dates.html#simultaneous-use