How to set date range for date of birth and date of death in vue.js datepicker?

Question

What i want to do is disable all the dates after today onward in both fields, And if date of death select first, in date of birth field disable all dates after date of death.... So far what i've done is like below

<Datepicker 
  :disabled-dates="disabledDates"
  format="yyyy-MM-dd"
  id="deceased_date_of_birth"
  input-class="form-control m-input"
  v-model="models.date_of_birth"
>
</Datepicker>
<Datepicker 
  format="yyyy-MM-dd"
  id="deceased_date_of_death"
  input-class="form-control m-input"
  v-model="models.date_of_death"
>
</Datepicker>

export default {
     data() {
      return {
            disabledDates: {
                to:this.setDateRange()
               },
             }

 methods: {
            setDateRange(){
                let x = new Date();
                console.log(x);
                return x;
            },
          }

        }

please give me a way to do this

Answer 1

You will probably need a computed property for each of the :disabled-dates binding for the date of birth and date of death datepickers:

<Datepicker 
  :disabled="isSyncEnabledInTenant != null ?  true : false"
  :disabled-dates="dateOfBirthDisabledDates"
  format="yyyy-MM-dd"
  id="deceased_date_of_birth"
  input-class="form-control m-input"
  v-model="models.date_of_birth"
>
</Datepicker>
<Datepicker 
  :disabled="isSyncEnabledInTenant != null ?  true : false"
  :disabled-dates="dateOfDeathDisabledDates"
  format="yyyy-MM-dd"
  id="deceased_date_of_death"
  input-class="form-control m-input"
  v-model="models.date_of_death"
>

Then, in your computed property, you can simply return the correct payload:

• You want to disable dates in the date of birth datepicker, that occur later than the date of death. This is specified using from .
• You want to disable dates in the date of death datepicker, that occur earlier than the date of birth. This is specified using to .
• You might want to add checks if the birth/death dates are provided first

The computed props will look like this:

computed: {
  // For date of birth, it cannot be later than date of death
  // So we use `from`
  dateOfBirthDisabledDates() {
    if (!this.models.date_of_death) return {};

    return {
      from: this.models.date_of_death;
    };
  },

  // For date of death, it cannot be earlier than date of death
  // So we use `to`
  dateOfDeathDisabledDates() {
    if (!this.models.date_of_birth) return {};

    return {
      to: this.models.date_of_birth
    };
  }
}

Answer 2

Please check this solution

Add this code in your component

template

<Datepicker 
  :disabled-dates="disabledBirthDate"
  format="yyyy-MM-dd"
  id="deceased_date_of_birth"
  input-class="form-control m-input"
  v-model="models.date_of_birth"
>
</Datepicker>
<Datepicker 
  format="yyyy-MM-dd"
  :disabled-dates="disabledDeathDate"
  id="deceased_date_of_death"
  input-class="form-control m-input"
  v-model="models.date_of_death"
>
</Datepicker>

data

data:()=>{
  return {
    models:{
       date_of_birth:null,
       date_of_death: null
    }
  }
}

computed

disabledBirthDate: function () {
  return this.models.date_of_death ? {from: new Date(this.models.date_of_death)} : {from: new Date()};
},
disabledDeathDate: function () {
  return this.formData.from ? {from: new Date(), to: new Date(this.formData.from)} : {from: new Date()};
},