Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Datums- und Uhrzeitauswahl

Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Datums- und Uhrzeitauswahl

In diesem Artikelbeispiel wird der spezifische Code der Vue-Komponente zur Datums- und Uhrzeitauswahl zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Das Wirkungsdiagramm ist wie folgt

Datumsauswahl mit Einzelauswahl

Datumsauswahl mit Mehrfachauswahl

Datums-/Uhrzeitauswahl

2. Vorbereitung

Methode des Formatierungstools für Datumsprototypen

Datum.Prototyp.Format = Funktion(fmt) {
  //Autor: meizz
  var o = {
    "M+": this.getMonth() + 1, //Monat"d+": this.getDate(), //Tag"h+": this.getHours(), //Stunden"m+": this.getMinutes(), //Minuten"s+": this.getSeconds(), //Sekunden"q+": Math.floor((this.getMonth() + 3) / 3), //QuartalS: this.getMilliseconds() //Millisekunden};
  wenn (/(y+)/.test(fmt))
    fmt = fmt.ersetzen(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.Länge)
    );
  für (var k in o)
    wenn (neuer RegExp("(" + k + ")").test(fmt))
      fmt = fmt.ersetzen(
        RegExp.$1,
        RegExp.$1.Länge == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).Länge)
      );
  fmt zurückgeben;
};

Analysieren Sie den Monat anhand der eingegebenen Uhrzeit und des Datums, erhalten Sie die Zeitstempel des ersten und letzten Tages des Monats sowie die Woche, die dem Zeitstempel des Monats entspricht [Hinweis]

  • Achten Sie darauf, 00:00 Uhr des ersten Tages des Monats zu analysieren. Die meisten Daten in js werden als 8:00 Uhr dieses Tages analysiert, aber einige Daten werden als 00:00 Uhr dieses Tages analysiert, was zu einem Zeitstempelfehler führt und zu einem Fehler beim Abrufen der Anzahl der Tage im Monat führt.
  • Da der Monat normalerweise einige Daten des vorherigen oder nächsten Monats enthält, muss auch die Anzahl der Wochentage berechnet werden, die im Monat enthalten sind.
getMonthDay() {
  //Der erste Tag des Monats var monthFirst = new Date(this.year + "-" + this.month + "-01 00:00");
      var w = MonatErster.getDay();
//Der erste Tag des nächsten Monats minus 1 s ist der letzte Tag des Monats this.startDay = monthFirst.getTime() - w * 24 * 3600 * 1000;
      wenn (dieser.Monat == 12) {
        this.endDay = neues Datum(this.year + 1 + "-01-01 00:00").getTime() - 1000;
      } anders {
        dies.endDay =
          neues Datum(dieses.Jahr + "-" + (dieser.Monat + 1) + "-01 00:00").getTime() -
          1000;
      }
//Berechnen Sie die Anzahl der Wochen im Monat und ermitteln Sie den ersten Tag der entsprechenden Woche var monthDay = (this.endDay + 1000 - this.startDay) / (24 * 3600 * 1000);
      this.weekNum = Math.ceil(MonatTag / 7);
//Holen Sie sich die entsprechenden Tage des Monats this.monthList = [];
      für (var i = 0; i < diese.Wochennummer; i++) {
        var Element = [];
        für (var j = 0; j < 7; j++) {
          Element.push(
            dieser.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000
          );
        }
        dieser.Monatsliste.push(Artikel);
      }
},

3. Konkrete Umsetzung

SCSS-Stile

 .Datumsauswahl-bg {
  Position: fest;
  links: 0;
  oben: 0;
  Breite: 100 %;
  Höhe: 100%;
  Z-Index: 5;
}

.Datumsauswahl {
  Hintergrundfarbe: weiß;
  Position: fest;
  Anzeige: Block;
  Polsterung: 4px;
  Z-Index: 6;
  Rand: durchgezogen 1px Gainsboro;
  Rahmenradius: 2px;
  .picker-top {
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Elemente ausrichten: zentrieren;
    Höhe: 30px;
    Zeilenhöhe: 30px;
    .picker-Pfeil {
      Anzeige: Inline-Flex;
      Elemente ausrichten: zentrieren;
      Inhalt ausrichten: zentriert;
      Breite: 30px;
      Höhe: 30px;
      Cursor: Zeiger;
      .iconfont {
        Farbe: #8a8a8a;
      }
      .iconfont:aktiv,
      .iconfont:hover {
        Farbe: #388dea;
      }
    }

    .Datumstext {
      biegen: 1;
      Schriftstärke: fett;
      Anzeige: Inline-Block;
      Textausrichtung: zentriert;
      Schriftgröße: 14px;
    }
  }

  .picker-inhalt {
    Anzeige: Block;
    Rahmen oben: durchgehend 1px Gainsboro;
    Rahmen unten: durchgezogen 1px Gainsboro;
    Höhe: 160px;
    Tisch {
      Breite: 100 %;
      Rahmen-Zusammenbruch: Zusammenbruch;
      Rahmenabstand: 0;
      Schriftgröße: 12px;
      Zeilenhöhe: 20px !wichtig;
      thead > tr {
        Hintergrundfarbe: #cedeee;
        das {
          Textausrichtung: zentriert;
          Schriftstärke: normal;
        }
      }
      tbody {
        tr {
          td {
            Schriftstärke: 600;
            Cursor: Zeiger;
            Textausrichtung: zentriert;
          }
          td.grau {
            Schriftstärke: normal;
            Farbe: #8a8a8a;
          }
          td.aktiv {
            Farbe: weiß;
            Hintergrund: #388dea;
          }
        }
      }
    }
  }

  .picker-inhalt1 {
    @erweitern .picker-Inhalt;
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Tisch {
      Breite: berechnet (100 % – 40 Pixel);
    }
    .Stundenliste {
      Anzeige: Inline-Block;
      Listenstil: keiner;
      Polsterung: 0;
      Rand: 0;
      Höhe: 100%;
      Überlauf-x: versteckt;
      Breite: 40px;
      Schriftgröße: 12px;

      Überlauf-y: automatisch;
      li {
        Polsterung: 0;
        Rand: 0;
        Anzeige: Flex;
        Elemente ausrichten: zentrieren;
        Polsterung: 0 4px;
        Höhe: 20px;
        Cursor: Zeiger;
      }
      li:nicht(:letztes-Kind) {
        Rahmen unten: durchgezogen 1px Gainsboro;
      }
      li.aktiv {
        Farbe: weiß;
        Hintergrund: #388dea;
      }
    }
    .Stundenliste::-webkit-scrollbar {
      Hintergrund: transparent;
      Höhe: 8px;
      Breite: 8px;
      Rand: keiner;
    }

    .hour-list::-webkit-scrollbar-thumb {
      Hintergrund: hellgrau;
      Rahmenradius: 5px;
    }
    //Setze das Ende der Bildlaufleiste
  }

  .picker-footer {
    Anzeige: Block;
   Zeilenhöhe: 30px;
   Textausrichtung: rechts;
   Leerzeichen: Nowrap;
    Taste {
      Gliederung: keine;
      Rand: durchgezogen 1px Gainsboro;
      Rahmenradius: 2px;
      Farbe: #8a8a8a;
      Höhe: 24px;
      Schriftgröße: 12px;
      Hintergrundfarbe: #f3f3f3;
    }
    Schaltfläche:aktiv,
    Schaltfläche: schweben {
      Rahmenfarbe: #388dea;
      Farbe: #388dea;
      Hintergrundfarbe: #d9edf6;
    }
  }
}

Datumsauswahl mit Einzelauswahl DatePicker

 <Vorlage>
  <div Stil="Anzeige:Inline-Block">
    <span @click="showPicker">{{getLangText(label.datePicker)}}</span>
    <div Klasse = "date-picker-bg" v-show = "isShow" @click = "closePicker"></div>
    <div
      Klasse="Datumsauswahl"
      v-show="istShow"
      :Stil="{width:'220px',top:pickerTop>0?pickerTop+'px':''}"
    >
      <div Klasse="picker-top">
        <span class="picker-arrow" @click="preYear">&lsaquo; &lsaquo;</span>
        <span class="picker-arrow" @click="preMonth">&lsaquo;</span>
        <span class="date-text">{{Jahr}}-{{Monat>9?Monat:"0"+Monat}}</span>
        <span class="picker-arrow" @click="nextMonth">&rsaquo;</span>
        <span class="picker-arrow" @click="nextYear">&rsaquo;&rsaquo;</span>
      </div>
        <!--Erzeuge den entsprechenden Monats- und Wochentabellenstart-->
      <div Klasse="Picker-Inhalt">
        <Tabelle>
          <Kopf>
            <tr>
              <th v-for="(item,idx) in weekList" :key="'week'+idx">{{getLangText(item)}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="idx ​​​​in WocheNum" :key="'WocheNum'+idx">
              <td
                v-for="m in 7"
                :Schlüssel="'MonatTag'+idx+'_'+m"
                :Klasse="[neues Datum(Monatsliste[idx-1][m-1]).getMonth()+1==Monat?'':'grau',selectDate==Monatsliste[idx-1][m-1]?'aktiv':'']"
                @click="amAuswahlDatum(Monatsliste[idx-1][m-1])"
                @dblclick="amBestätigungsdatum(Monatsliste[idx-1][m-1])"
              >{{neues Datum(Monatsliste[idx-1][m-1]).getDate()}}</td>
              <!--Datum ist dunkel, wenn es der Monat ist, sonst ist es hell-->
            </tr>
          </tbody>
        </Tabelle>
      </div>
        <!--Generiere die entsprechende Monats- und Wochentabelle Ende-->
      <div Klasse="picker-footer">
        <button @click="closePicker">{{getLangText(label.close)}}</button>
        <button @click="setNow">{{getLangText(label.today)}}</button>
        <!-- <button @click="confirmPicker">{{getLangText(label.ok)}}</button> -->
      </div>
    </div>
  </div>
</Vorlage>
<Skript>
Datum.Prototyp.Format = Funktion(fmt) {
  //Autor: meizz
  var o = {
    "M+": this.getMonth() + 1, //Monat"d+": this.getDate(), //Tag"h+": this.getHours(), //Stunden"m+": this.getMinutes(), //Minuten"s+": this.getSeconds(), //Sekunden"q+": Math.floor((this.getMonth() + 3) / 3), //QuartalS: this.getMilliseconds() //Millisekunden};
  wenn (/(y+)/.test(fmt))
    fmt = fmt.ersetzen(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.Länge)
    );
  für (var k in o)
    wenn (neuer RegExp("(" + k + ")").test(fmt))
      fmt = fmt.ersetzen(
        RegExp.$1,
        RegExp.$1.Länge == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).Länge)
      );
  fmt zurückgeben;
};
Standard exportieren {
  Name: "DatePicker",
  Requisiten: {
    langType: {
      Typ: Zeichenfolge,
      Standard: window.localStorage.getItem("langType")
    },
    Datum: {
      Typ: Zeichenfolge,
      Standard: neues Datum ().format("jjjj-MM-tt")
    },
    istScroll: {
      Typ: Boolean,
      Standard: false
    },
     istAnzeigen:{
      Typ: Boolean,
      Standard: falsch
    }
  },
  Daten: () => ({
    Etikett: {
      ok: { zh: "OK", en: "OK" },
      schließen: { zh: "Schließen", en: "schließen" },
      heute: { zh: "heute", en: "heute" },
      datePicker: { zh: "Datumsauswahl", en: "DatePicker" }
    },
    Wochenliste: [
      { zh: "日", en: "Sun" },
      { zh: "Mon", en: "Mon" },
      { zh: "二", en: "Tue" },
      { zh: "三", en: "Wed" },
      { zh: "四", en: "Do" },
      { zh: "五", en: "Fir" },
      { zh: "六", en: "Sat" }
    ],
    Jahr: neues Date().getFullYear(),
    Monat: neues Date().getMonth() + 1,
    Tag: neues Date().getDate(),

    Starttag: 0,
    Endtag: 0,
    Wochennummer: 0,
    selectDate: neues Datum(neues Datum().format("yyyy-MM-dd 00:00")).getTime(),
    Monatsliste: [],
    pickerTop: 0
  }),
  betrachten:
    Jahr() {
      dies.getMonthDay();
    },
    Monat() {
      dies.getMonthDay();
    }
  },
  Methoden: {
    getLangText(Element) {
      wenn (Artikel) {
        if (this.langType == "en") {
          wenn (item.en && item.en.length > 1) {
            return item.en.substring(0, 1).toUpperCase() + item.en.substring(1);
          } sonst wenn (item.en && item.en.length == 1) {
            return item.en.toUpperCase();
          } anders {
            zurückkehren "--";
          }
        } anders {
          item.zh zurückgeben? item.zh: "--";
        }
      } anders {
        zurückkehren "--";
      }
    },
    vorJahr() {
      dieses.Jahr = dieses.Jahr - 1;
    },
    nächstesJahr() {
      dieses.Jahr = dieses.Jahr + 1;
    },
    nächsterMonat() {
      wenn (dieser.Monat == 12) {
        dieses.Jahr = dieses.Jahr + 1;
        dieser.Monat = 1;
      } anders {
        diesen.Monat++;
      }
    },
    vorMonat() {
      wenn (dieser.Monat == 1) {
        dieses.Jahr = dieses.Jahr - 1;
        dieser.Monat = 12;
      } anders {
        diesen.Monat--;
      }
    },
    showPicker(e) {
      wenn (dies.istScroll) {
        this.pickerTop = e.clientY + e.offsetY;
        var h = document.getElementById("app").offsetHeight;
        wenn (this.pickerTop > h - 230) {
          this.pickerTop = h - 230;
        }
      }

       dies.$emit("update:is-show",true);
      var Zeit = neues Datum (dieses.Datum).getTime();
      dieses.Jahr = neues Datum(Uhrzeit).getFullYear();
      dieser.Monat = neues Datum(Uhrzeit).getMonth() + 1;
      dieser.Tag = neues Datum(Uhrzeit).getDate();
      this.selectDate = neues Datum(
        neues Datum(Uhrzeit).format("jjjj-MM-tt 00:00")
      ).getTime();
    },
    amBestätigungsdatum(Zeit) {
      dies.onSelectDate(Zeit);
      dies.confirmPicker();
    },
    closePicker() {
      dies.$emit("update:is-show",false);
    },
    setzeJetzt() {
      dieses.Jahr = neues Date().getFullYear();
      dieser.Monat = neues Date().getMonth() + 1;
      dieser.Tag = neues Date().getDate();
      this.selectDate = neues Datum(
        neues Datum().format("jjjj-MM-tt 00:00")
      ).getTime();
    },
    bestätigePicker() {
      dies.$emit("update:date", neues Datum(this.selectDate).format("yyyy-MM-dd"));
      dies.$emit(
        "Picker-Ergebnis",
        neues Datum(dieses.SelectDate + diese.SelectHour * 3600000).Format(
          "jjjj-MM-tt hh:00"
        )
      );
      dies.closePicker();
    },
    getMonthDay() {
      var MonatErster = neues Datum(dieses Jahr + "-" + dieser Monat + "-01 00:00");
      var w = MonatErster.getDay();

      this.startDay = MonatErster.getTime() - w * 24 * 3600 * 1000;
      wenn (dieser.Monat == 12) {
        this.endDay = neues Datum(this.year + 1 + "-01-01 00:00").getTime() - 1000;
      } anders {
        dies.endDay =
          neues Datum(dieses.Jahr + "-" + (dieser.Monat + 1) + "-01 00:00").getTime() -
          1000;
      }

      var MonatTag = (dieser.Endtag + 1000 - dieser.Starttag) / (24 * 3600 * 1000);
      this.weekNum = Math.ceil(MonatTag / 7);
      diese.Monatsliste = [];
      für (var i = 0; i < diese.Wochennummer; i++) {
        var Element = [];
        für (var j = 0; j < 7; j++) {
          Element.push(
            dieser.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000
          );
        }
        this.monthList.push(item);
      }
    },
    beiAuswahlDatum(Zeit) {
      this.selectDate = Uhrzeit;
      dieses.Jahr = neues Datum(Uhrzeit).getFullYear();
      dieser.Monat = neues Datum(Uhrzeit).getMonth() + 1;
      dieser.Tag = neues Datum(Uhrzeit).getDate();
      dies.$emit("update:date", neues Datum(Uhrzeit).format("yyyy-MM-dd"));
    }
  },
  montiert() {
    dies.getMonthDay();
  }
};
</Skript>
<style lang="scss" scoped>
</Stil>

Mehrfachauswahl-Datumsauswahl DatePicker1

<Vorlage>
  <div Stil="Anzeige:Inline-Block">
    <span @click="showPicker">Datumsauswahl</span>
    <div Klasse = "date-picker-bg" v-show = "isShow" @click = "closePicker"></div>
    <div Klasse = "Datumsauswahl" v-show = "istShow" Stil = "Breite: 220px">
      <div Klasse="picker-top">
        <span class="picker-arrow" @click="preYear">&lsaquo; &lsaquo;</span>
        <span class="picker-arrow" @click="preMonth">&lsaquo;</span>
        <span class="date-text">{{Jahr}}-{{Monat>9?Monat:"0"+Monat}}</span>
        <span class="picker-arrow" @click="nextMonth">&rsaquo;</span>
        <span class="picker-arrow" @click="nextYear">&rsaquo;&rsaquo;</span>
      </div>
      <!--Erzeuge den entsprechenden Monats- und Wochentabellenstart-->
      <div Klasse="picker-content">
        <Tabelle>
          <Kopf>
            <tr>
              <th v-for="(item,idx) in weekList" :key="'week'+idx">{{getLangText(item)}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="idx ​​​​in WocheNum" :key="'WocheNum'+idx">
              <td
                v-for="m in 7"
                :Schlüssel="'MonatTag'+idx+'_'+m"
                :Klasse="[neues Datum(Monatsliste[idx-1][m-1]).getMonth()+1==Monat?'':'grau',getSelectDate(Monatsliste[idx-1][m-1])?'aktiv':'']"
                @click="amAuswahlDatum(Monatsliste[idx-1][m-1])"
              >{{neues Datum(Monatsliste[idx-1][m-1]).getDate()}}</td>
               <!--Datum ist dunkel, wenn es der Monat ist, sonst ist es hell-->
            </tr>
          </tbody>
        </Tabelle>
      </div>
       <!--Generiere die entsprechende Monats- und Wochentabelle Ende-->
      <div Klasse="picker-footer">
        <button @click="onFullMonth">Ganzer Monat</button>
        <button @click="onSelectDate(new Date(new Date().format('yyyy-MM-dd 00:00')).getTime())">Heute</button>
        <button @click="closePicker">Schließen</button>
      </div>
    </div>
  </div>
</Vorlage>
<Skript>
Datum.Prototyp.Format = Funktion(fmt) {
  //Autor: meizz
  var o = {
    "M+": this.getMonth() + 1, //Monat"d+": this.getDate(), //Tag"h+": this.getHours(), //Stunden"m+": this.getMinutes(), //Minuten"s+": this.getSeconds(), //Sekunden"q+": Math.floor((this.getMonth() + 3) / 3), //QuartalS: this.getMilliseconds() //Millisekunden};
  wenn (/(y+)/.test(fmt))
    fmt = fmt.ersetzen(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.Länge)
    );
  für (var k in o)
    wenn (neuer RegExp("(" + k + ")").test(fmt))
      fmt = fmt.ersetzen(
        RegExp.$1,
        RegExp.$1.Länge == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).Länge)
      );
  fmt zurückgeben;
};
Standard exportieren {
  Name: "DatePicker",
  Requisiten: {
    langType: {
      Typ: Zeichenfolge,
      Standard: "zh"
    },
    Datum: {
      Typ: Zeichenfolge,
      Standard: ""
    },

    istAnzeigen:{
      Typ: Boolean,
      Standard: falsch
    }
  },
  Daten: () => ({
    Wochenliste: [
      { zh: "日", en: "Sun" },
      { zh: "Mon", en: "Mon" },
      { zh: "二", en: "Tue" },
      { zh: "三", en: "Wed" },
      { zh: "四", en: "Do" },
      { zh: "五", en: "Fir" },
      { zh: "六", en: "Sat" }
    ],
    Jahr: neues Date().getFullYear(),
    Monat: neues Date().getMonth() + 1,
    Tag: neues Date().getDate(),

    Starttag: 0,
    Endtag: 0,
    Wochennummer: 0,
    selectDate: neues Datum(neues Datum().format("yyyy-MM-dd 00:00")).getTime(),
    Monatsliste: [],
    Ergebnis: []
  }),
  betrachten:
    Datum() {
      dies.parseDate();
    },
    Jahr() {
      dies.getMonthDay();
    },
    Monat() {
      dies.getMonthDay();
    }
  },
  Methoden: {
    getLangText(Element) {
      wenn (Artikel) {
        if (this.langType == "en") {
          wenn (item.en && item.en.length > 1) {
            return item.en.substring(0, 1).toUpperCase() + item.en.substring(1);
          } sonst wenn (item.en && item.en.length == 1) {
            return item.en.toUpperCase();
          } anders {
            zurückkehren "--";
          }
        } anders {
          item.zh zurückgeben? item.zh: "--";
        }
      } anders {
        zurückkehren "--";
      }
    },
    vorJahr() {
      dieses.Jahr = dieses.Jahr - 1;
    },
    nächstesJahr() {
      dieses.Jahr = dieses.Jahr + 1;
    },
    nächsterMonat() {
      wenn (dieser.Monat == 12) {
        dieses.Jahr = dieses.Jahr + 1;
        dieser.Monat = 1;
      } anders {
        diesen.Monat++;
      }
    },
    vorMonat() {
      wenn (dieser.Monat == 1) {
        dieses.Jahr = dieses.Jahr - 1;
        dieser.Monat = 12;
      } anders {
        diesen.Monat--;
      }
    },
    getSelectDate(Zeit) {
      für (var i = 0; i < dieses.Ergebnis.Länge; i++) {
        wenn (Zeit == dieses.Ergebnis[i]) {
          gibt true zurück;
        }
      }
      gibt false zurück;
    },
    showPicker(e) {
      dies.$emit("update:is-show",true);
      var Zeit = neues Date().getTime();
      dieses.Jahr = neues Datum(Uhrzeit).getFullYear();
      dieser.Monat = neues Datum(Uhrzeit).getMonth() + 1;
      dieser.Tag = neues Datum(Uhrzeit).getDate();
      this.selectDate = neues Datum(
        neues Datum(Uhrzeit).format("jjjj-MM-tt 00:00")
      ).getTime();
    },
    amBestätigungsdatum(Zeit) {
      dies.onSelectDate(Zeit);
      dies.confirmPicker();
    },
    closePicker() {
      dies.$emit("update:is-show",false);
    },
    setzeJetzt() {
      dieses.Jahr = neues Date().getFullYear();
      dieser.Monat = neues Date().getMonth() + 1;
      dieser.Tag = neues Date().getDate();
      this.selectDate = neues Datum(
        neues Datum().format("jjjj-MM-tt 00:00")
      ).getTime();
    },
    bestätigePicker() {
      dies.$emit("update:date", neues Datum(this.selectDate).format("yyyy-MM-dd"));
      dies.$emit(
        "Picker-Ergebnis",
        neues Datum(dieses.SelectDate + diese.SelectHour * 3600000).Format(
          "jjjj-MM-tt hh:00"
        )
      );
      dies.closePicker();
    },
    getMonthDay() {
      var MonatErster = neues Datum(dieses Jahr + "-" + dieser Monat + "-01 00:00");
      var w = MonatErster.getDay();

      this.startDay = MonatErster.getTime() - w * 24 * 3600 * 1000;
      wenn (dieser.Monat == 12) {
        this.endDay = neues Datum(this.year + 1 + "-01-01 00:00").getTime() - 1000;
      } anders {
        dies.endDay =
          neues Datum(dieses.Jahr + "-" + (dieser.Monat + 1) + "-01 00:00").getTime() -
          1000;
      }

      var MonatTag = (dieser.Endtag + 1000 - dieser.Starttag) / (24 * 3600 * 1000);
      this.weekNum = Math.ceil(MonatTag / 7);
      diese.Monatsliste = [];
      für (var i = 0; i < diese.Wochennummer; i++) {
        var Element = [];
        für (var j = 0; j < 7; j++) {
          Element.push(
            dieser.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000
          );
        }
        this.monthList.push(item);
      }
    },
    beiAuswahlDatum(Zeit) {
      this.selectDate = Uhrzeit;
      dieses.Jahr = neues Datum(Uhrzeit).getFullYear();
      dieser.Monat = neues Datum(Uhrzeit).getMonth() + 1;
      dieser.Tag = neues Datum(Uhrzeit).getDate();
      var tag = true;
      //Auswahl abbrechen, falls sie bereits ausgewählt ist für (var i = 0; i < this.result.length; i++) {
        wenn (dieses.Ergebnis[i] == Zeit) {
          Tag = falsch;
          dies.Ergebnis.splice(i, 1);
          brechen;
        }
      }
      //Datum hinzufügen, wenn nicht ausgewählt if (tag) {
        dies.Ergebnis.Push(Zeit);
        dieses.Ergebnis = dieses.Ergebnis.Sortieren(Funktion(a, b) {
          gib a - b zurück;
        });
      }
      var Liste = [];
      für (var i = 0; i < dieses.Ergebnis.Länge; i++) {
        wenn (dieses.Ergebnis[i] > 0) {
          list.push(neues Datum(dieses.Ergebnis[i]).format("jjjj-MM-tt"));
        }
      }
      if (Listenlänge > 0) {
        dies.$emit("update:date", list.join(",") + "(total" + list.length + "days)");
      } anders {
        dies.$emit("update:date", "");
      }

      dies.$emit("picker-result", dies.result);
    },
    beiVollständigemMonat() {
      dies.$emit("update:date", dieses.Jahr + "Jahr" + dieser.Monat + "Monat");
      dies.$emit("picker-result", 30);
    },

    parseDate() {
      wenn (dieses.Datum) {
        var str = dieses.Datum;
        wenn (this.date.indexOf("(") > 0) {
          str = dieses.Datum.Substring(0, dieses.Datum.IndexOf("("));
        }
        wenn (str) {
          var list = str.split(",");
          var Ergebnis = [];
          für (var i = 0; i < Liste.Länge; i++) {
            Ergebnis.push(
              neues Datum(
                neues Datum(Liste[i]).Format("jjjj-MM-tt 00:00:00")
              ).getTime()
            );
          }
          dieses.Ergebnis = Ergebnis;
        }
      }
    }
  },
  montiert() {
    dies.getMonthDay();
    dies.parseDate();
  }
};
</Skript>
<style lang="scss" scoped>
</Stil>

Datums-/Uhrzeitauswahl

<Vorlage>
  <div Stil="Anzeige:Inline-Block">
    <span @click="showPicker">{{getLangText(label.datetimePicker)}}</span>
    <div Klasse = "date-picker-bg" v-show = "isShow" @click = "closePicker"></div>
    <div Klasse = "date-picker" v-show = "isShow" Stil = "Breite: 260px;">
      <div Klasse="picker-top">
        <span class="picker-arrow" @click="preYear">&lsaquo; &lsaquo;</span>
        <span class="picker-arrow" @click="preMonth">&lsaquo;</span>
        <span class="date-text">{{Jahr}}-{{Monat>9?Monat:"0"+Monat}}</span>
        <span class="picker-arrow" @click="nextMonth">&rsaquo;</span>
        <span class="picker-arrow" @click="nextYear">&rsaquo;&rsaquo;</span>
      </div>
      <div Klasse="picker-content1">
        <Tabelle>
          <Kopf>
            <tr>
              <th v-for="(item,idx) in weekList" :key="'week'+idx">{{getLangText(item)}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="idx ​​​​in WocheNum" :key="'WocheNum'+idx">
              <td
                v-for="m in 7"
                :Schlüssel="'MonatTag'+idx+'_'+m"
                :Klasse="[neues Datum(Monatsliste[idx-1][m-1]).getMonth()+1==Monat?'':'grau',selectDate==Monatsliste[idx-1][m-1]?'aktiv':'']"
                @click="amAuswahlDatum(Monatsliste[idx-1][m-1])"
                @dblclick="amBestätigungsdatum(Monatsliste[idx-1][m-1])"
              >{{neues Datum(Monatsliste[idx-1][m-1]).getDate()}}</td>
            </tr>
          </tbody>
        </Tabelle>
        <ul class="Stundenliste">
          <li
            v-for="n in 24"
            :Schlüssel="'Stundenliste'+n"
            @click="beiAusgewählterStunde(n-1)"
            :Klasse="[selectHour==n-1?'active':'']"
            @dblclick="beiStunde bestätigen(n-1)"
          >{{n-1}}:00</li>
        </ul>
      </div>
      <div Klasse="picker-footer">
        <button @click="closePicker">{{getLangText(label.close)}}</button>
        <button @click="setNow">{{getLangText(label.today)}}</button>
        <!-- <button @click="confirmPicker">{{getLangText(label.ok)}}</button> -->
      </div>
    </div>
  </div>
</Vorlage>
<Skript>
Datum.Prototyp.Format = Funktion(fmt) {
  //Autor: meizz
  var o = {
    "M+": this.getMonth() + 1, //Monat"d+": this.getDate(), //Tag"h+": this.getHours(), //Stunden"m+": this.getMinutes(), //Minuten"s+": this.getSeconds(), //Sekunden"q+": Math.floor((this.getMonth() + 3) / 3), //QuartalS: this.getMilliseconds() //Millisekunden};
  wenn (/(y+)/.test(fmt))
    fmt = fmt.ersetzen(
      RegExp.$1,
      (this.getFullYear() + "").substr(4 - RegExp.$1.Länge)
    );
  für (var k in o)
    wenn (neuer RegExp("(" + k + ")").test(fmt))
      fmt = fmt.ersetzen(
        RegExp.$1,
        RegExp.$1.Länge == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).Länge)
      );
  fmt zurückgeben;
};
Standard exportieren {
  Name: "DateTimePicker",
  Requisiten: {
    langType: {
      Typ: Zeichenfolge,
      Standard: window.localStorage.getItem("langType")
    },
    Datum/Uhrzeit: {
      Typ: Zeichenfolge,
      Standard: neues Datum ().format("jjjj-MM-tt hh:00")
    },
     istAnzeigen:{
      Typ: Boolean,
      Standard: falsch
    }
  },
  Daten: () => ({

    Etikett: {
      ok: { zh: "OK", en: "OK" },
      schließen: { zh: "Schließen", en: "schließen" },
      heute: { zh: "jetzt", en: "jetzt" },
      datetimePicker: { zh: "Datetime-Auswahl", en: "datetimePicker" }
    },
    Wochenliste: [
      { zh: "日", en: "Sun" },
      { zh: "Mon", en: "Mon" },
      { zh: "二", en: "Tue" },
      { zh: "三", en: "Wed" },
      { zh: "四", en: "Do" },
      { zh: "五", en: "Fir" },
      { zh: "六", en: "Sat" }
    ],
    Jahr: neues Date().getFullYear(),
    Monat: neues Date().getMonth() + 1,
    Tag: neues Date().getDate(),

    Starttag: 0,
    Endtag: 0,
    Wochennummer: 0,
    selectDate: neues Datum(neues Datum().format("yyyy-MM-dd 00:00")).getTime(),
    Monatsliste: [],
    Stunde auswählen: neues Datum().Stunden abrufen()
  }),
  betrachten:
    Jahr() {
      dies.getMonthDay();
    },
    Monat() {
      dies.getMonthDay();
    }
  },
  Methoden: {
    getLangText(Element) {
      wenn (Artikel) {
        if (this.langType == "en") {
          wenn (item.en && item.en.length > 1) {
            return item.en.substring(0, 1).toUpperCase() + item.en.substring(1);
          } sonst wenn (item.en && item.en.length == 1) {
            return item.en.toUpperCase();
          } anders {
            zurückkehren "--";
          }
        } anders {
          item.zh zurückgeben? item.zh: "--";
        }
      } anders {
        zurückkehren "--";
      }
    },
    vorJahr() {
      dieses.Jahr = dieses.Jahr - 1;
    },
    nächstesJahr() {
      dieses.Jahr = dieses.Jahr + 1;
    },
    nächsterMonat() {
      wenn (dieser.Monat == 12) {
        dieses.Jahr = dieses.Jahr + 1;
        dieser.Monat = 1;
      } anders {
        diesen.Monat++;
      }
    },
    vorMonat() {
      wenn (dieser.Monat == 1) {
        dieses.Jahr = dieses.Jahr - 1;
        dieser.Monat = 12;
      } anders {
        diesen.Monat--;
      }
    },
    showPicker() {
      dies.$emit("update:is-show",true);

      var Zeit = neues Datum (dieses.datetime).getTime();
      dieses.Jahr = neues Datum(Uhrzeit).getFullYear();
      dieser.Monat = neues Datum(Uhrzeit).getMonth() + 1;
      dieser.Tag = neues Datum(Uhrzeit).getDate();
      this.selectDate = neues Datum(
        neues Datum(Uhrzeit).format("jjjj-MM-tt 00:00")
      ).getTime();
      this.selectHour = neues Datum(Uhrzeit).getHours();
    },
    amBestätigungsdatum(Zeit) {
      dies.onSelectDate(Zeit);
      dies.confirmPicker();
    },
    beiStunde bestätigen(n) {
      dies.onSelectHour(n);
      dies.confirmPicker();
    },
    closePicker() {
      dies.$emit("update:is-show",false);
    },
    setzeJetzt() {
      dieses.Jahr = neues Date().getFullYear();
      dieser.Monat = neues Date().getMonth() + 1;
      dieser.Tag = neues Date().getDate();
      this.selectDate = neues Datum(
        neues Datum().format("jjjj-MM-tt 00:00")
      ).getTime();
      this.selectHour = neues Date().getHours();
    },
    bestätigePicker() {
      dies.$emit(
        "Aktualisierung: Datum/Uhrzeit",
        neues Datum(dieses.SelectDate + diese.SelectHour * 3600000).Format(
          "jjjj-MM-tt hh:00"
        )
      );
      dies.$emit(
        "Picker-Ergebnis",
        neues Datum(dieses.SelectDate + diese.SelectHour * 3600000).Format(
          "jjjj-MM-tt hh:00"
        )
      );
      dies.closePicker();
    },
    getMonthDay() {
      var MonatErster = neues Datum(dieses Jahr + "-" + dieser Monat + "-01 00:00");
      var w = MonatErster.getDay();

      this.startDay = MonatErster.getTime() - w * 24 * 3600 * 1000;
      wenn (dieser.Monat == 12) {
        this.endDay = neues Datum(this.year + 1 + "-01-01 00:00").getTime() - 1000;
      } anders {
        dies.endDay =
          neues Datum(dieses.Jahr + "-" + (dieser.Monat + 1) + "-01 00:00").getTime() -
          1000;
      }

      var MonatTag = (dieser.Endtag + 1000 - dieser.Starttag) / (24 * 3600 * 1000);
      this.weekNum = Math.ceil(MonatTag / 7);
      diese.Monatsliste = [];
      für (var i = 0; i < diese.Wochennummer; i++) {
        var Element = [];
        für (var j = 0; j < 7; j++) {
          Element.push(
            dieser.startDay + i * 24 * 3600 * 1000 * 7 + j * 24 * 3600 * 1000
          );
        }
        this.monthList.push(item);
      }
    },
    beiAuswählenStunde(n) {
      dies.selectHour = n;
      dies.$emit(
        "Aktualisierung: Datum/Uhrzeit",
        neues Datum(dieses.SelectDate + diese.SelectHour * 3600000).Format(
          "jjjj-MM-tt hh:00"
        )
      );
    },
    beiAuswahlDatum(Zeit) {
      this.selectDate = Uhrzeit;
      dieses.Jahr = neues Datum(Uhrzeit).getFullYear();
      dieser.Monat = neues Datum(Uhrzeit).getMonth() + 1;
      dieser.Tag = neues Datum(Uhrzeit).getDate();
      dies.$emit(
        "Aktualisierung: Datum/Uhrzeit",
        neues Datum(Uhrzeit + diese.Stunde auswählen * 3600000).Format("jjjj-MM-tt hh:00")
      );
    }
  },
  montiert() {
    dies.getMonthDay();
  }
};
</Skript>
<style lang="scss" scoped>
</Stil>

Verwenden des Pickers

<Vorlage>
<Abschnitt Stil="padding:16px;">
  <p>Datum1:{{Datum1}}</p>
  <date-picker :date.sync="date1" :is-show.sync="showDate1"></date-picker>
   <p>Datum2:{{Datum2}}</p>
    <date-picker1 :date.sync="date2" :is-show.sync="showDate2"></date-picker1>
     <p>Datum3:{{Datum3}}</p>
    <datetime-picker :datetime.sync="date3" :is-show.sync="showDate3"></datetime-picker>
</Abschnitt>
</Vorlage>

<Skript>
Datum.Prototyp.Format = Funktion(fmt)
{ //Autor: meizz
  var o = {
    "M+" : this.getMonth()+1, //Monat "d+" : this.getDate(), //Tag "h+" : this.getHours(), //Stunden "m+" : this.getMinutes(), //Minuten "s+" : this.getSeconds(), //Sekunden "q+" : Math.floor((this.getMonth()+3)/3), //Quartal "S" : this.getMilliseconds() //Millisekunden};
  wenn(/(y+)/.test(fmt))
    fmt = fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  für (var k in o)
    wenn(neuer RegExp("("+ k +")").test(fmt))
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  fmt zurückgeben;
}
importiere DateTimePicker aus "./DateTimePicker";
importiere DatePicker aus "./DatePicker";
importiere DatePicker1 aus "./DatePicker1";
Standard exportieren {
Name: „PickerTest“,
Komponenten: {
  'Datumsauswahl':Datumsauswahl,
  'Datums-/Uhrzeitauswahl': Datums-/Uhrzeitauswahl,
  'Datumsauswahl1':Datumsauswahl1
},
Daten:()=>({
  showDate1:false,
  showDate2:false,
  showDate3:false,
  Datum1:neues Datum().format("jjjj-MM-tt"),
  date2:neues Datum().format("jjjj-MM-tt"),
  date3:neues Datum().format("jjjj-MM-tt hh:mm:ss"),
})
}
</Skript>

<Stil>

</Stil>

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:
  • Detaillierte Erläuterung des benutzerdefinierten Datums- und Zeitselektors für die Vue-Validierung
  • Ant Design Vue Datepicker Datumsauswahl Chinesische Bedienung
  • Anweisungen zur Verwendung des Datumsauswahlfelds gemischt mit dem Zeitwähler in Ant Design Vue
  • Implementierungscode der Datumsverknüpfungsauswahlfunktion basierend auf der Vue-Komponente
  • Verwenden Sie den iView-Datumswähler in Vue.js und legen Sie die Überprüfungsfunktion für Start- und Endzeit fest
  • Implementierung der Zeitauswahlbereichsbeschränkung für die Datumsauswahl von ElementUI

<<:  Detaillierte Erläuterung zum Erstellen einer Ansicht (CREATE VIEW) und zu Nutzungsbeschränkungen in MySQL

>>:  Detaillierte Erläuterung der Sicherheitskonfigurationselemente des Docker-Daemons

Artikel empfehlen

Lösungen für MySQL-Batch-Insert- und eindeutige Indexprobleme

MySQL-Batch-Einfügeproblem Da bei der Entwicklung...

SASS Style Programmierhandbuch für CSS

Da immer mehr Entwickler SASS verwenden, müssen w...

Beim Hochladen von Bildern mit Axios in Vue sind Probleme aufgetreten

Inhaltsverzeichnis Was ist FormData? Eine praktis...

Eine kurze Analyse von MySQL - MVCC

Versionskette In den Tabellen der InnoDB-Engine g...

Verwenden Sie die CSS-Eigenschaft border-radius, um den Bogen festzulegen

Phänomen: Wandeln Sie das Div in einen Kreis, ein...

Lassen Sie uns ausführlich über bitweise Operationen im React-Quellcode sprechen

Inhaltsverzeichnis Vorwort Mehrere gängige Bitope...

Vollständige Schritte zur Verwendung von Nginx+Tomcat zum Lastenausgleich unter Windows

Vorwort Heute erklärt Ihnen Prince die vollständi...

JS implementiert das Schlangenspiel

Inhaltsverzeichnis 1. Initialisierungsstruktur 2....

Vue verwendet die Element-el-upload-Komponente, um auf die Grube zu treten

Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...

Bedeutung und Verwendung einer Linux-CD

Was bedeutet Linux-CD? Unter Linux bedeutet cd „V...

Richtiger Einsatz von MySQL-Partitionstabellen

Übersicht über partitionierte MySQL-Tabellen Wir ...

CSS-Pseudoklasse: empty makes me shine (Beispielcode)

Jeder, der meine Artikel in letzter Zeit gelesen ...

Tiefgreifendes Verständnis des Slot-Scopes in Vue (für Anfänger geeignet)

Es gibt bereits viele Artikel über Slot-Scope auf...

Öffnen Sie den Windows-Server-Port (nehmen Sie als Beispiel Port 8080)

Was ist ein Port? Bei den Ports, auf die wir uns ...

So konfigurieren Sie Linux für die Verwendung der LDAP-Benutzerauthentifizierung

Ich verwende die in CentOS implementierte LDAP-Be...