Javascript （引导）Vue日期选择器：如何定义开始和结束日期，以便结束日期可以'；你不能在开始日期之前吗？

我在Vue.js中有两个BootstrapVue日期选择器。我想实现一个假期管理器，这样您就可以定义假期的开始日期（input-3）和结束日期（input-4）。结束日期应大于或等于开始日期。我当前的实现如下所示：

<b-form-group
      id="input-group-3"
      label="Anfangsdatum:"
      label-for="input-3"
>
<b-form-datepicker
      id="input-3"
      v-model="von"
      placeholder="Anfangsdatum auswählen"
      required
      :min="minAnfang"
></b-form-datepicker>
</b-form-group>

<b-form-group id="input-group-4" label="Enddatum:" label-for="input-4">
<b-form-datepicker
     id="input-4"
     v-model="bis"
     placeholder="Enddatum auswählen"
     :min="minEnde"
     required
></b-form-datepicker>
</b-form-group>

  data() {
    const datum = new Date();
    const datum_heute = new Date(datum.getFullYear(), datum.getMonth(), datum.getDate());
    
    const minVon = new Date(datum_heute);
    minVon.setDate(minVon.getDate()+ 1);

    const minBis = new Date(datum_heute);
    minBis.setDate(minVon.getDate()+1);

    return {
        Urlaubsart: "",
        Grund: "",
        von: "",
        bis: "",
        Status: "",
        BenutzerID: 24,
        minAnfang: minVon,
        minEnde: minBis,
      arten: [
        { value: null, text: "Wählen Sie die Urlaubsart aus" },
        { value: "Urlaub", text: "Urlaub" },
        { value: "Sonderurlaub", text: "Sonderurlaub" },
      ],
      gruende: [
        { value: "Umzug", text: "Umzug" },
        { value: "Hochzeit", text: "Hochzeit" },
        { value: "Geburt", text: "Geburt" },
        { value: "Umzug", text: "Sonstiges" },
      ],
      Urlaubstage: "",
    };
  }

---

那么，我如何确保结束日期等于或大于开始日期呢？

我已经为您创建了一个代码笔： （请注意，我使用vuetify作为布局引擎，但您会明白的）

我所做的：

• 定义

  internalBis

  属性
• 使用

  get

  和

  set

  函数定义计算的

  bis

  属性：
• 在

  Set

  函数中设置

  internalBis

  属性
• 比较

  get

  函数中的

  von

  和

  internalBis

  ，如果

  internalBis

  小于

  von

在组件和表单提交中，您只能使用

bis

，因为这将始终返回正确的值。请注意，如果

von

现在更改为原始

bis

之后的日期，

bis

也会自动更改

对您来说，最有趣的代码是：

数据：（）=>({
von:new Date（）.toISOString（）.substr（0,10），
internalBis:new Date（）.toISOString（）.substr（0,10）
}),
计算：{
之二：{
//吸气剂
get:function（）{
if（this.internalBis

一个选项是使用get/set将结束日期设置为计算属性，如下所述：在设置期间，您可以检查输入并与开始日期进行比较。更好的方法是：在get中进行检查，当开始日期更改时，结束日期也将更改。请提供代码片段？我真的不明白你的意思。我在渲染中遇到一个错误：“InternalError:递归太多”。我从数据中删除了bis属性，并将其添加到computed中。我还移除了minBis财产和minEnde。代码如下所示：

computed:{bis:{get:function（）{if（this.bis

No，看看我的代码。我使用

internalBis

是有原因的。您不能在setter中设置

this.bis

，因为这将递归调用setter。好的，谢谢！现在它可以工作了，所以当我选择一个von日期时，bis日期等于von日期，但仍然可以选择一个bis日期，即von日期之前。好的，您需要使用

：min

属性，例如将其设置为

：min=“von”

，或者为此创建另一个计算属性，在这里，您返回von+1天。我已经更新了代码笔，向您展示了原理。