vue2-datepicker disable days range date

user_6678345 0
Viewed 9864

I using vue2-datepicker. I have range of date:

from: 02-10-2019

to: 07-10-2019

I need disabled all days without this range.

I used method disabled-days but I don't know how I can declare range in this function. I can only disable individual days, for example:

<date-picker
    v-model="dateAccept"
    range
    :disabled-days="disabledDates2"
    valueType="format">
</date-picker>

disabledDates2: [
    new Date(2019, 10, 2), new Date(2019, 10, 6)
]

In vue-datepicker (version 1) isset function :disabled-dates but not working in version 2

vue.js datepicker
2 Answers

I found resolve. Just I used in data function:

disabledBefore: new Date(2019, 10, 2),
disabledAfter: new Date(2019, 10, 6)

And in datepicker:

<date-picker
    v-model="dateAccept"
    range
    valueType="format"
    :not-before="disabledBefore"
    :not-after="disabledAfter">
</date-picker>
user_66783450

have a look at ref

you can use the method

<data-picker ... :disabled-date="disabledRange" range></data-picker>
        
methods: {
     ...
     disabledRange: function (date) {
         return date < new Date(2019, 10, 2) || date > new Date(2019, 10, 6);
     }
     ...
}
user_59932780
Related