Как установить диапазон дат для даты рождения и даты смерти в vue. js datepicker?

Question

Что я хочу сделать, так это отключить все даты после сегодняшнего дня в обоих полях, и если в качестве даты смерти выбрать первое, в поле даты рождения отключить все даты после даты смерти .... Пока что я сделано, как показано ниже

<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;
            },
          }

        }

пожалуйста, дайте мне способ сделать это

Answer 1

Вам, вероятно, понадобится вычисляемое свойство для каждого из привязок :disabled-dates для даты рождения и даты смерти: указатели даты:

<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"
>

Затем в своем вычисленном свойстве вы можете просто вернуть правильная полезная нагрузка:

• Вы хотите отключить даты в дате выбора даты рождения, которые происходят позже даты смерти. Это указывается с помощью from.
• . Вы хотите отключить даты в датчике даты смерти, которые происходят раньше даты рождения. Это указывается с помощью to.
• Возможно, вы захотите добавить проверки, если даты рождения / смерти указываются первыми

Расчетные реквизиты будут выглядеть следующим образом:

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

Пожалуйста, проверьте это решение

Добавьте этот код в ваш компонент

шаблон

<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
    }
  }
}

вычислено

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