如何在 vue.js 日期选择器中设置出生日期和死亡日期的日期范围？

Question

我想做的是在两个字段中禁用今天之后的所有日期，如果死亡日期 select 首先，在出生日期字段中禁用死亡日期之后的所有日期.... 到目前为止，我所做的如下所示

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

然后，在您计算的属性中，您可以简单地 return 正确的负载：

您想禁用出生日期选择器中晚于死亡日期的日期。这是使用 from.
您想禁用死亡日期选择器中早于出生日期的日期。这是使用 to.
如果先提供 birth/death 日期，您可能想要添加检查

计算出的道具将如下所示：

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

请检查此解决方案

在您的组件中添加此代码

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

如何在 vue.js 日期选择器中设置出生日期和死亡日期的日期范围？

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

datepicker

vue.js