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

by

0👍

✅

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()};
},
👤Rijosh

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
    };
  }
}
👤Terry

Leave a comment