Блог

У меня есть два BootstrapVue datepickers в моей форме в Vue.js . Я хотел бы реализовать менеджер праздников, чтобы вы могли определить дату начала (ввода-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: "",
    };
  }
 

Итак, как я могу гарантировать, что конечная дата равна начальной дате или больше?

Я создал для вас codepen: https://codepen.io/mtveerman/pen/gOwwNoL (обратите внимание, что я использую vuetify в качестве движка верстки, но вы поймете идею)

Что я сделал:

• Определить internalBis свойство
• Определите вычисляемое bis свойство с get set помощью функции and:
• Установите internalBis свойство в set функции
• Сравните von и internalBis в get функции, верните von , если internalBis меньше, чем von

В ваших компонентах и отправлениях форм вы должны работать только с bis , поскольку это всегда будет возвращать правильное значение. Обратите внимание, что если von теперь изменится на дату после оригинала 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
      }
    }
  }