Detaillierte Erläuterung des dynamischen Zeitbereichsgrenzfalls im Vue el-date-picker

//Fall 1 Original-Copyright-Erklärung: Dieser Artikel ist ein Originalartikel von weixin_40998880 und entspricht der CC 4.0 BY-SA-Copyright-Vereinbarung. Bitte fügen Sie beim Nachdruck den Originalquellenlink und diese Erklärung bei.
//Link zu diesem Artikel: https://blog.csdn.net/weixin_40998880/article/details/106272897
 
//html
<el-Datumsauswahl
   v-model="Zeit"
   Typ="Datum/Uhrzeitbereich"
   @change="DatumsauswahlÄnderung"
   :picker-options="Picker-Optionen"
   Bereichstrennzeichen="-"
   start-placeholder="Startdatum"
   end-placeholder="Enddatum"
   ausrichten="rechts"
   Stil="Breite: 100 %;"
   Werteformat="jjjj-MM-tt HH:mm:ss" Format="jjjj-MM-tt HH:mm:ss"
   :Standardzeit="['00:00:00','23:59:59']">
</el-Datumsauswahl>
 

 
//Skript
 
Daten(){
  zurückkehren {
     selectData: '',
     pickerOptions: {
      // Wenn Sie darauf klicken, wird die Startzeit ausgewählt, die minDate ist
      bei Auswahl: ({ maxDate, minDate }) => {
         this.selectData = minDate.getTime()
         wenn (maxDatum) {
           // Einschränkungen entfernen this.selectData = ''
         }
      },
      disabledDate: (Zeit) => {
          // Ob die Beurteilungsbedingung eingeschränkt werden soll if (!this.isNull(this.selectData)) {
            var date = neues Datum(diese.selectData)
            // Hier sind die Einschränkungsbedingungen. Daten, die größer oder kleiner als dieser Monat sind, sind deaktiviert (versuchen Sie, diese Methode nicht zu verwenden, da dieser Monat anderer Jahre auch ausgewählt werden kann. Spezifische Einschränkungsdaten finden Sie in Situation 2).
            returniere date.getMonth() > neues Datum(Uhrzeit).getMonth() || date.getMonth() < neues Datum(Uhrzeit).getMonth()
          } anders {
            return false
          }
        }
     }
  }
},
Methoden:{
  // Prüfen ob es leer ist isNull(value) {
    wenn (Wert) {
      return false
    }
    returniere wahr
  }
}
 

//Situation 2
//html
    <el-col :span="8">
                <el-form-item prop="beginTime" label="Terminbeginn:">
                  <el-Datumsauswahl
                    v-Modell="EditForm.BeginTime"
                    Typ="Datum/Uhrzeit"
                    Platzhalter="Startzeit auswählen"
                    :picker-options="PickerOptionen[0]"
                    Werteformat="jjjj-MM-tt HH:mm:ss"
                    :default-time="Standardzeit[0]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              <el-col :span="8"
                <el-form-item prop="endTime" label="Termin-Endzeit:">
                  <el-Datumsauswahl
                    v-Modell="EditForm.Endzeit"
                    Typ="Datum/Uhrzeit"
                    Platzhalter="Startzeit auswählen"
                    :picker-options="pickerOptionen[1]"
                    Werteformat="jjjj-MM-tt HH:mm:ss"
                    :default-time="Standardzeit[1]"
                  >
                  </el-date-picker> </el-form-item
              ></el-col>
              
              

 //Skript
    Daten(){
  zurückkehren {
     selectData: '',
     Standardzeit: [],
     PickerOptionen: [
        {
          disabledDate: Zeit => {
            const curDate = neues Date().getTime();
            konstanter Tag = 14 * 24 * 3600 * 1000;
            const dateRegion = aktuelles Datum + Tag;
            zurückkehren (
              Zeit.getTime() < Date.now() – 8.64e7 ||
              time.getTime() > Datumsregion
            );
          }
        },
        {
          //Beschränken Sie die Endzeit auf eine Woche nach der Startzeit disabledDate: time => {
            // Ob die Beurteilungsbedingung eingeschränkt werden soll const date = new Date(this.editForm.beginTime);
            wenn (!this.isNull(date)) {
              konstanter Tag = 7 * 24 * 3600 * 1000;
              const dateRegion = date.getTime() + tag;
              zurückkehren (
                //Deaktiviere Daten, die vor der Startzeit und eine Woche nach der Startzeit liegen. new Date(time).getTime() > dateRegion ||
                neues Datum(Uhrzeit).getTime() < date.getTime()
              );
            } anders {
              gibt false zurück;
            }
          }
        }
      ],
  }
},
Methoden:{
  // Prüfen ob es leer ist isNull(value) {
    wenn (Wert) {
      return false
    }
    returniere wahr
  },
  // Aktuelle Uhrzeit abrufen und bei Auswahl den Standardwert hinzufügen getNowTime() {
      lass d = neues Datum();
      lass Jahr, Monat, Tag, Stunde, Minute;
      //Zehn Minuten nach der aktuellen Zeit d.setTime(d.getTime() + 10 * 60 * 1000);
      [Jahr, Monat, Tag, Stunde, Minute] = [
        d.getFullYear(),
        d.getMonth(),
        d.getDate(),
        d.getHours(),
        d.getMinutes()
      ];
      sei Stunde2 = Stunde + 1;
      //Der Standardwert bei Auswahl der Startzeit beträgt zehn Minuten nach der aktuellen Uhrzeit. //Der Standardwert bei Auswahl der Endzeit beträgt eine Stunde und zehn Minuten nach der aktuellen Uhrzeit. this.defaultTime = [
        Stunde + ":" + Minute + ":00",
        Stunde2 + ":" + Minute + ":00"
      ];
    },
}