element-ui DatePicker Datumsauswahl – Steuert die Auswahl auf Stunden, Minuten und Sekunden genau – Verbietet die Auswahl von Datumsangaben vor dem heutigen Tag – oder nach dem heutigen Tag ### Vorwort

Vorwort

Bei Verwendung des Yudao-Frameworks verwendet das Backend kürzlich generierten Code. Aufgrund eines Typproblems kann die Zeit nur ein Zeitstempel sein, andernfalls ist sie leer (1970-).
Das Frontend ist eigentlich sehr einfach. Ändern Sie einfach den Typ der Datumsauswahl in „Zeitfehler“, aber entsprechend den Geschäftsanforderungen muss er auf Stunden, Minuten und Sekunden genau sein.
Konvertieren Sie den Zeitstempeltyp und Sie werden feststellen, dass das Datum der ausgewählte Tag ist, die Stunden, Minuten und Sekunden jedoch die Stunden, Minuten und Sekunden des aktuellen Computers sind.
Es ist jedoch notwendig, die Zeit, Minuten und Sekunden entsprechend den Geschäftsanforderungen zu steuern (1949-10-1 00:00:00 1949-10-1 23:59:59)

Lösung

Mit der Datumsauswahl können wir den String-Typ verwenden, um die Stunden, Minuten und Sekunden zu steuern, dies kann jedoch nicht im Backend gespeichert werden (es können nur Zeitstempel gespeichert werden).

Verwenden Sie beim Senden das Datumsobjekt, um das neue Datum in Standardzeit umzuwandeln, und verwenden Sie dann Date.parse, um die Standardzeit in einen Zeitstempel umzuwandeln.

Code

// 此时是字符串时间-可以精确到任意时分秒
<el-date-picker
   v-model="contractform.startDate"
   type="date"
   value-format="yyyy-MM-dd 00:00:00"
   placeholder="选择日期"
/>
// 提交时操作，字符串时间-标准时间-时间戳时间
 this.contractform.startDate = Date.parse(
    new Date(this.contractform.startDate)
 )

2. Es ist verboten, ein Datum vor dem heutigen Tag oder ein Datum nach dem heutigen Tag auszuwählen

// 日期选择器其实也提供方法Picker Options
<el-date-picker
   v-model="date"
   type="date"
   size="small"
   value-format="yyyy-MM-dd"
   format="yyyy-MM-dd"
   :placeholder="'选择日期'"
   :picker-options="pickerOptions"
/>

Es ist verboten, Daten vor dem heutigen Tag auszuwählen – schreiben Sie sie einfach direkt in die Daten

// - 8.64e7今天可选，不减今天不可选
pickerOptions: {
   disabledDate(time) {
      return time.getTime() < Date.now() - 8.64e7;
   }
}

Sie können kein Datum nach dem heutigen Tag auswählen (heute ist optional – schreiben Sie es einfach direkt in die Daten).

// - 8.64e7今天不可选 不减今天可选
pickerOptions: {
   disabledDate(time) {
      return time.getTime() > Date.now();
   }
}

Zusammenfassen:

Nachdem Sie diesen Prozess durchlaufen haben, werden Sie meiner Meinung nach auch einen ersten tiefen Eindruck von der Datumsauswahl von element-ui DatePicker bekommen – steuern Sie die Auswahl genau auf Stunden, Minuten und Sekunden – und verbieten Sie die Auswahl von Datumsangaben vor dem heutigen Tag – oder nach dem heutigen Tag, aber tatsächlich Entwicklung, auf die wir gestoßen sind. Die Situation ist definitiv anders, daher müssen wir ihre Prinzipien verstehen und dürfen niemals von ihren Prinzipien abweichen. Komm schon, schlag die Arbeiter!

Bitte weisen Sie auf etwaige Mängel hin, vielen Dank – Feng Guo Wuhen