Detaillierte Erklärung des Vue2 Cube-UI-Zeitwählers

<div Klasse="Header">
      <cube-input v-on:focus="showMinPicker('startTime')" v-model="startTime" placeholder="Startzeit" :maxlength=30 style="width: 50%;"></cube-input>
      <span>An</span>
      <cube-input v-on:focus="showMinPicker('endTime')" v-model="endTime" placeholder="Endzeit" :maxlength=30 style="width: 50%;"></cube-input>
</div>

Daten () {
    zurückkehren {
      // Startzeit startTime: '',
      // Endzeit endTime: '',
      // Zeitidentifizierung: ''
    }
  }

Methoden: {
    // Auf den Startzeitpunkt der Auswahl warten showMinPicker (time) {
      wenn (!this.minPicker) {
        dies.minPicker = dies.$createDatePicker({
          Titel: 'Zeit auswählen',
          sichtbar: wahr,
          // Minimale Zeit min: neues Datum (2000, 0, 1),
          // Maximale Zeit max: neues Datum (2099, 12, 1),
          // Aktueller Zeitwert: new Date(),
          // Anzeigeformat format: {
            Jahr: 'JJJJ',
            Monat: 'MM',
            Datum: 'TT'
          },
          //Wie viele Spalten sollen angezeigt werden? columnCount: 3,
          // Nachdem die ausgewählte Zeit bestimmt wurde onSelect: this.selectHandler,
          // Nach Auswahl der Zeit zum Abbrechen onCancel: this.cancelHandler
        })
      }
      // Zeitidentifikation auswählen this.timeIdentifying = time
      // this.minPicker.show() anzeigen
    },
    // Die drei Parameter nach der ausgewählten Zeit haben unterschiedliche Zeitformate, die je nach Bedarf festgelegt werden können selectHandler (selectedTime, selectedText, formatedTime) {
      lass Zeit = ''
      für (let index = 0; index < selectedText.length; index++) {
        wenn (Index === (ausgewählterText.Länge - 1)) {
          Zeit += ausgewählter Text[Index]
        } anders {
          Zeit += ausgewählterText[Index] + '-'
        }
      }
      console.log('Mit der Änderung beginnen')
      wenn (diese.Zeitidentifikation === 'Startzeit') {
        console.log('Startzeit ändern')
        this.startTime = Zeit
      } sonst wenn (this.timeIdentifying === 'endTime') {
        console.log('Endzeit ändern')
        this.endTime = Zeit
      }
      console.log('Ende der Änderung')
    },
    // Ereignis abbrechen cancelHandler () {
      // Ausgewählte Zeit löschen this.startTime = ''
      this.endTime = ''
    }
  }