时间戳

首页 > 解决方案 > （引导程序）Vue Datepicker：如何定义开始和结束日期，使结束日期不能早于开始日期？

javascript - （引导程序）Vue Datepicker：如何定义开始和结束日期，使结束日期不能早于开始日期？

问题描述

我在 Vue.js 的表单中有两个 BootstrapVue 日期选择器。我想实现一个假期管理器，这样您就可以定义假期的开始（输入 3）和结束日期（输入 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>

Vue中的数据部分实现如下：

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

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

标签： javascriptvue.jsdatepickerbootstrap-vue

解决方案

我为您创建了一个 codepen：https ://codepen.io/mtveerman/pen/gOwwNoL （请注意，我使用 vuetify 作为布局引擎，但您会明白的）

我做了什么：

  • 定义一个internalBis属性
  • 用 a和函数定义计算bis属性：getset
  • 在函数中设置internalBis属性set
  • 在函数中比较von和，如果小于则返回internalBisgetvoninternalBisvon

在您的组件和表单提交中，您应该只使用bis，因为它总是会返回正确的值。请注意，如果vonnow 更改为 original 之后的日期bis，bis也会自动更改。

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

data: () => ({
     von: new Date().toISOString().substr(0, 10),
     internalBis: new Date().toISOString().substr(0, 10)
  }),
  computed: {
    bis: {
      // getter
      get: function () {
        if (this.internalBis < this.von) {
          return this.von
        }
        return this.internalBis
      },
      // setter
      set: function (newValue) {
        this.internalBis = newValue
      }
    }
  }

推荐阅读