uniapp implementiert Datums- und Zeitauswahl

uniapp implementiert Datums- und Zeitauswahl

In diesem Artikelbeispiel wird der spezifische Code von Uniapp zur Implementierung des Datums- und Zeitwählers zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Aufgrund der Anforderungen des Projekts habe ich versucht, die Vant-Komponentenbibliothek zu verwenden, aber es gab immer Probleme und die Plug-Ins auf dem Plug-In-Markt entsprachen nicht ganz den Anforderungen. Ich habe relevante Informationen nachgeschlagen und das Endergebnis war wie folgt:

Erstellen Sie zunächst einen Util-Ordner im Stammverzeichnis und legen Sie dateTimePicker.js ab

dateTimePicker.js

Funktion mitDaten(Param){
  Rückgabeparameter < 10? '0' + Param: '' + Param;
}
Funktion getLoopArray(Start,Ende){
  var start = start || 0;
  var Ende = Ende || 1;
  var-Array = [];
  für (var i = Start; i <= Ende; i++) {
    array.push(mitDaten(i));
  }
  Array zurückgeben;
}
Funktion getMonthDay(Jahr,Monat){
  var flag = Jahr % 400 == 0 || (Jahr % 4 == 0 && Jahr % 100 != 0), Array = null;

  Schalter (Monat) {
    Fall '01':
    Fall '03':
    Fall '05':
    Fall '07':
    Fall '08':
    Fall '10':
    Fall '12':
      Array = getLoopArray(1, 31)
      brechen;
    Fall '04':
    Fall '06':
    Fall '09':
    Fall '11':
      Array = getLoopArray(1, 30)
      brechen;
    Fall '02':
      Array = Flagge? getLoopArray(1, 29) : getLoopArray(1, 28)
      brechen;
    Standard:
      Array = 'Das Monatsformat ist falsch, bitte erneut eingeben! '
  }
  Array zurückgeben;
}
Funktion getNewDateArry(){
  // Verarbeitung der aktuellen Zeit (Jahr, Monat, Tag, Stunde, Minute und Sekunde) var newDate = new Date();
  var Jahr = mitDaten(newDate.getFullYear()),
      mont = mitDaten(newDate.getMonth() + 1),
      Datum = mitDaten(neuesDatum.getDate()),
      Stunde = mitDaten(newDate.getHours()),
      minu = mitDaten(newDate.getMinutes());
      // seco = mitDaten(newDate.getSeconds());

  return [Jahr, Monat, Datum, Stunde, Minute];
}
Funktion dateTimePicker(Startjahr,Endjahr,Datum) {
  //Gibt das standardmäßig angezeigte Array und die Verknüpfungsarray-Deklaration zurück. var dateTime = [], dateTimeArray = [[],[],[],[],[]];
  var start = Startjahr || 1978;
  var end = endYear || 2100;
 
 //Den übergebenen String in ein Array umwandeln let dataArr = date.split(" ")[0].split('/')
 lass Zeit = Datum.split(" ")[1].split(':')
  // Daten standardmäßig anzeigen. Wenn ein benutzerdefinierter Wert übergeben wird, wird die benutzerdefinierte Zeit verwendet. Andernfalls wird die aktuelle Zeit verwendet...dataArr-Array-Dekonstruktion var defaultDate = date ? [...dataArr, ...time] : getNewDateArry();
 
  //Verarbeite Verknüpfungslistendaten/*Jahr Monat Tag Stunde Minute Sekunde*/
  dateTimeArray[0] = getLoopArray(start,ende);
  dateTimeArray[1] = getLoopArray(1, 12);
  dateTimeArray[2] = getMonthDay(Standarddatum[0], Standarddatum[1]);
  dateTimeArray[3] = getLoopArray(0, 23);
  dateTimeArray[4] = getLoopArray(0, 59);
  // dateTimeArray[5] = getLoopArray(0, 59);
 
 //Das dateTimeArray durchlaufen dateTimeArray.forEach((current,index) =>
  //Passt die Position des defaultDate[index]-Werts im aktuellen Array an dateTime.push(current.indexOf(defaultDate[index]))
  );

  zurückkehren {
    Datum/Uhrzeit-Array: Datum/Uhrzeit-Array,
    Datum/Uhrzeit: Datum/Uhrzeit
  }
}
modul.exporte = {
  Datum/UhrzeitAuswahl: Datum/UhrzeitAuswahl,
  getMonthDay: getMonthDay
}

Vorlage

<picker mode="multiSelector" :range="dateTimeArray" v-model="dateTime" @change="ändern" @columnchange="columnchange">
 <Ansicht>
  //disable = "true" deaktiviert die Eingabe, um zu verhindern, dass die Tastatur beim Klicken auftaucht <input type="text" disabled="true" v-model="upTower" placeholder="Bitte wählen Sie eine Zeit aus" placeholder-class="inputPlace" />
 </Ansicht>
</picker>

Skriptteil

//Führe die zuvor deklarierte Klasse ein const dateTimePicker = require('@/util/dateTimePicker.js')
 Standard exportieren {
  Daten() {
   zurückkehren {
    // Zeitselektor dateTimeArray: null,
    Datum/Uhrzeit: null,
    Startjahr: 2000,
    Endjahr: 2050,
   };
  },
  beim Laden() {
   // Übergeben Sie das Startjahr startYear und das Endjahr endYear
   //Startanzeigezeit anpassen let arr = '2018/09/01 13:00'
   let obj = dateTimePicker.dateTimePicker(dieses.Startjahr, dieses.Endjahr, arr)
   dies.dateTimeArray = obj.dateTimeArray
   dies.dateTime = obj.dateTime
  },
  Methoden: {
   //Zeitformat mitDaten(param){
    Rückgabeparameter < 10? '0' + Param: '' + Param;
   },
   ändern(e){
    let-Wert = []
    e.detail.value.forEach((val,index) => {
     Wert.push(dies.mitDaten(Wert))
    })
    let dateArray = "20" + Wert[0] + "-" + Wert[1] + "-" + Wert[2] + " " + Wert[3] + ":" + Wert[4]
    this.upTower = Datumsarray
   },
   Spaltenänderung(e){
    let dateArr = dieses.dateTimeArray
    lass arr = dieses.Datum/Uhrzeit
    //Daten in die Spalte verschieben und ihren Wert aktualisieren arr[e.detail.column] = e.detail.value
    //Aktualisieren Sie den anzuzeigenden Tag des Monats (28 oder 29 oder 30 oder 31)
    DatumAn[2] = DatumZeitPicker.getMonthDay(DatumAn[0][An[0]], DatumAn[1][An[1]])
    //Zum Schluss den neuesten Wert dem dateTimeArray zuweisen
    this.dateTimeArray = dateArr
    this.dateTime = arr
   },

Im Picker-Attribut: range = "dateTimeArray" = "dateTimeArray ist ein zweidimensionales Array. Die Länge gibt die Anzahl der Spalten an. Jedes Element im Array gibt die Daten jeder Spalte an . Dies ist der entscheidende Punkt der mehrspaltigen Selektoranzeige.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Mehrere Anwendungsszenarien für Picker-Selektoren in Uniapp

<<:  Standard-CSS-Stil der XHTML-Sprache

>>:  Analyse des Bereitstellungsprozesses der Leistungstestplattform nGrinder mit Docker

Artikel empfehlen

vue realisiert die Anpassung der Spaltenbreite von el-table perfekt

Inhaltsverzeichnis Hintergrund Technische Lösung ...

MySQL-Startfehler InnoDB: Sperren nicht möglich/ibdata1-Fehler

Beim Starten von MySQL in einer OS X-Umgebung wir...

18 Web-Usability-Prinzipien, die Sie kennen müssen

Sie können über die besten visuellen Designfähigk...

Detaillierte Erläuterung der TCPdump-Befehlsbeispiele in Linux

Vorwort Einfach ausgedrückt ist tcpdump ein Paket...

Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao

Inhaltsverzeichnis Vorwort Text 1. Panel 2. Huaro...

Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)

iOS 1. URL-Schema Diese Lösung ist grundsätzlich ...

border-radius ist eine Methode zum Hinzufügen abgerundeter Ränder zu Elementen

border-radius:10px; /* Alle Ecken sind mit einem ...

Lösung für den Fehler bei der Installation von Docker auf der CentOS-Version

1. Versionsinformationen # Katze /etc/system-rele...

50 wunderschöne FLASH-Website-Designbeispiele

Mit Flash konnten Designer und Entwickler umfangr...

Lassen Sie uns kurz über die Änderungen im Setup in vue3.0 sfc sprechen

Inhaltsverzeichnis Vorwort Standard-SFC-Schreibme...

Einfaches Grafik-Tutorial zur Verwendung von Adobe Brackets

Adobe Brackets ist eine Open Source-, einfache un...