Disable future and past dates

[WebMedic-X]

Hi

Currently we can only disable one type of date it seems using isDateDisabled

            isFutureDate(date) {
                const currentDate = new Date();
                return date < currentDate;
            }

We need to disable access to past dates as well limit the selection to not after a certain date

Example:

Do not select past dates from today and only select up to 12/12/2020

Any way to do that?

Thank you

[KuenzelIT]

You can do this if you wrap vue-date-pick in a custom component and use the isDateDisabled function with two props minDate and maxDate like this:

isDisabled(date)
{
     if (this.isDateDisabled(date))
         return true

     date = moment(date)

     if (this.minDate !== null && date.isBefore(this.minDate))
         return true

     return this.maxDate !== null && date.isAfter(this.maxDate)
 }

At least this is how I solved it.

[rah-emil]

You can do this if you wrap vue-date-pick in a custom component and use the isDateDisabled function with two props minDate and maxDate like this:

isDisabled(date)
{
     if (this.isDateDisabled(date))
         return true

     date = moment(date)

     if (this.minDate !== null && date.isBefore(this.minDate))
         return true

     return this.maxDate !== null && date.isAfter(this.maxDate)
 }

At least this is how I solved it.

This is a stupid and inconvenient solution.

[KuenzelIT]

It worked for me, but feel free to find another less stupid solution.

[daveokeeffe]

The isDateDisabled method just returns a boolean, so you can check as many dates as you need to:

<date-pick
  v-model="dateOfBirth"
  class="date-picker"
  :selectable-year-range="{ from: 1900, to: actualYear }"
  :is-date-disabled="isDateOutsideAcceptableRange"
  format="DD-MM-YYYY"
  />

isDateOutsideAcceptableRange(date) {
  const nineteenHundred = new Date('01/01/1900');
  const currentDate = new Date();
  return date < nineteenHundred || date > currentDate;
}