TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)

TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)

Die Projektanforderungen lauten: Datum und Uhrzeit auswählen, nur Zeiten nach der aktuellen Uhrzeit auswählen und die Mindeststufe auf Minuten deaktivieren.

Es gibt zwei Möglichkeiten
1. Verwenden Sie den Datums- und Uhrzeitwähler DateTimePicker.
2. DatePicker und TimePicker kombiniert verwenden Hier verwende ich die zweite Methode, das wichtigste Attribut sind Picker-Optionen

<el-Datumsauswahl
          v-Modell = "formInline.inventoryDate"
          Typ="Datum"
          ausrichten="rechts"
          Platzhalter="Bitte wählen Sie ein Datum aus"
          :picker-options="Picker-Optionen"
          Werteformat="jjjj-MM-tt"
          format="jjjj-MM-tt"
          @change="Änderungsdatum"
         ></el-Datumsauswahl>
         <el-Zeit-Picker
          v-Modell = "formInline.inventoryDateTime"
          Typ="Datum"
          ausrichten="rechts"
          Platzhalter="Bitte wählen Sie eine Uhrzeit aus"
          :picker-options="{
           wählbarer Bereich: this.startTimeRange
          }"
          @change="Änderungszeit"
          Werteformat="HH:mm:ss"
          Format = "HH:mm:ss"
         ></el-Zeitpicker>
Daten(){
	zurückkehren {
		pickerOptions: {
    disabledDate: Zeit => {
     Rückgabewert: Zeit.getTime() < Date.now() - 3600 * 1000 * 24
    },
   },
	}
},
betrachten:
  'formInline.inventoryDate':{
   tief:wahr,
   handler(neuerWert, alterWert) {
    wenn(neuerWert){
     let nowDate = this.$options.filters['sendTimeDate'](new Date().getTime()+60*1000);// Die Zeit nach einer Minute (ich bin hier aufgrund geschäftlicher Anforderungen hier, Sie können die Zeit hier nach Belieben anpassen)
     let dt = nowDate.split(" ");
     sei st = '';
     wenn(neuerWert.split(" ")[0] == dt[0]){
      // Heute beginnt die ausgewählte Zeit mit der aktuellen Stunde, Minute und Sekunde st = dt[1];
     }anders{
      // Morgen und danach beginnen um 0:00 Uhr st = '00:00:00';
     }
     this.startTimeRange = st + '- 23:59:59';
     //Konsole.log(dieser.startTimeRange)
     //Beispiel: Wenn es heute 10:41:40 Uhr ist, dann wählen Sie den Zeitbereich: 11:41:40 - 23:59:59
       //Ansonsten: 00:00:00 - 23:59:59
    }
   },
  }
 },

Idee: Verwenden Sie das Konfigurationselement disabledDate im Attribut picker-options von el-date-picker, um zuerst den Datumswähler zu deaktivieren, sodass nur Daten nach dem aktuellen Datum ausgewählt werden können. Verwenden Sie dann watch, um das vom Datumswähler ausgewählte Datum zu überwachen. Wenn es heute ist, verwenden Sie das Konfigurationselement selectableRange im Attribut picker-options von el-time-picker, um die auswählbare Zeit zu steuern.

Hinweis: Obwohl diese Logik die Auswahl von Sekunden deaktivieren kann, wird die Auswahl von Sekunden auf der Front-End-Seite nicht deaktiviert. Wenn Sie die vorherigen Sekunden auswählen, werden standardmäßig die Sekunden nach einer Minute angezeigt (ich habe dies aus geschäftlichen Gründen getan. Sie können den deaktivierten Zeitraum nach Belieben über den obigen Code anpassen).

Rendereffekt:

Bildbeschreibung hier einfügen

Lassen Sie mich die erste Methode zusammenfassen. Das Datum, das ich deaktiviert habe, liegt vor heute und der Zeitraum reicht von 22:00 bis 02:00 Uhr. Ich werde den Code direkt posten.

<el-Datumsauswahl
         Klasse="Datumsklasse"
         v-Modell="aa"
         Typ="Datum/Uhrzeit"
         :picker-options="Picker-Optionen"
         Platzhalter="Nach 22:00"
         Stil="Breite:100%">
        </el-Datumsauswahl>


 Daten() {
   zurückkehren {
     aa: '',
     pickerOptions: {
      // Zeit begrenzen selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'], // Hier kann auch eine Variable angebunden werden um die Zeit dynamisch zu begrenzen // Datum begrenzen disabledDate: this.disabledDate
    },
   }
 } ,
 Methoden: {
  deaktiviertesDatum(Uhrzeit) {
    Rückgabewert: Zeit.getTime() < Date.now() - 3600 * 1000 * 24
  }
}

Dies ist das Ende dieses Artikels zum Deaktivieren eines Teils der Zeit im TimePicker-Zeitwähler im Element (Deaktivierung auf Minuten). Weitere Informationen zum Deaktivieren eines Teils der Zeit im Element TimePicker finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt
  • Anwendungsbeispiel für das Datums-/Uhrzeit-Selektorelement DateTimePicker

<<:  So sortieren Sie eine Zeile oder Spalte in MySQL

>>:  So konfigurieren Sie Nginx zur Unterstützung von IPv6 unter Linux

Artikel empfehlen

Zusammenfassung der Vorteile von Vue3 gegenüber Vue2

Inhaltsverzeichnis 1. Warum brauchen wir vue3? 2....

Detaillierte Erklärung der MySQL-Vorkompilierungsfunktion

In diesem Artikel wird die MySQL-Vorkompilierungs...

JavaScript implementiert die Kontrollkästchenauswahlfunktion

In diesem Artikelbeispiel wird der spezifische Ja...

Docker-Installation Nginx Tutorial Implementierung Abbildung

Lassen Sie uns Nginx installieren und ausprobiere...

Detaillierte Erklärung der Kernkonzepte und der grundlegenden Verwendung von Vuex

Inhaltsverzeichnis einführen Start Installieren ①...

Jmeter stellt eine Verbindung zum Datenbankprozessdiagramm her

1. Laden Sie den MySQL-JDBC-Treiber (mysql-connec...

Der Prozess der Installation von SVN auf Ubuntu 16.04.5LTS

Dieser Artikel stellt kurz den Prozess der Einric...

Implementierungsprinzip der MySQL MyISAM-Standardspeicher-Engine

Standardmäßig generiert die MyISAM-Tabelle drei D...

Beispiel für den Import von Nginx-Protokollen in Elasticsearch

Die Nginx-Protokolle werden von Filebeat gesammel...

Analyse der grundlegenden Verwendung von ul und li

Navigation, kleine Datenmenge Tabelle, zentriert &...

Detaillierte Erklärung der Text-Fill-Color-Eigenschaft in CSS3

Was bedeutet Textfüllfarbe? Rein wörtlich bedeute...

MySQL-Unterabfrage und Details zur Verknüpfungstabelle

Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...

JavaScript-Implementierung des Spiels des Lebens

Inhaltsverzeichnis Konzept-Einführung Logische Re...