Inhaltsverzeichnis
Firmengeschäft: Wählen Sie einen Datumsbereich aus, aber nur dieser Monat kann ausgewählt werden
Vorwort:
element-ui, als führende UI-Komponentenbibliothek von vue, wird von Front-End-Entwicklern sehr geliebt.
Dieser Artikel konzentriert sich darauf, wie Sie die Datumsauswahl von el-date-picker verwenden und wie Sie das ausgewählte Datum einschränken. Gehen Sie zuerst zum offiziellen Website-Link --- el-date-picker
Grundlegende Verwendung:
Sehen Sie sich zuerst den folgenden Code an
<template>
<div class="content">
<el-date-picker v-model="value" type="date" placeholder="选择日期">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>Dies ist die grundlegendste Art, es zu verwenden, und es sieht so aus.
Lassen Sie uns zunächst eine Anforderung erwähnen: Es ist erforderlich, dass kein Datum vor dem aktuellen Datum ausgewählt werden kann. Was soll ich tun? Schauen Sie sich das Attribut picker-options an, wir müssen uns um disabledDate kümmern!
<el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
data() {
return {
value: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now();
},
}
};
},Hinweis: Die Rückgabe ist ein boolescher Wert. Wenn er wahr ist, bedeutet dies deaktiviert. Verwenden Sie den Zeitstempel zum Vergleichen. Sie können die Zeit ausdrucken, um zu sehen, was sie ist. Tatsächlich ist es die Zeit einzeln. Nehmen Sie den Zeitstempel und Vergleichen Sie es mit der aktuellen Uhrzeit. Wenn es kleiner als die aktuelle Uhrzeit ist, bedeutet dies, dass es das vorherige Datum ist. Wenn es wahr ist, ist die Auswahl verboten, andernfalls kann es ausgewählt werden
Es ist ersichtlich, dass es verboten ist, zu klicken und auszuwählen, wenn die Maus auf dem Datum mit grauem Hintergrund platziert wird.
Zeitintervall:
Schwierigkeit Upgrade: Das Datum kann nur zehn Tage in der Zukunft ausgewählt werden, und weder das vorherige Datum noch das Datum zehn Tage später können ausgewählt werden, eigentlich ist dies relativ einfach: Zuerst müssen wir den Zeitstempel des Datums zehn berechnen Tage später, was sehr einfach ist
const DAY = 10
const nowTimer = Date.now()
const lastTimer = nowTimer + DAY * 24 * 60 * 60 * 1000Dann vergleichen wir noch in disabledDate!
pickerOptions: {
disabledDate(time) {
return time.getTime() < nowTimer || time.getTime() > lastTimer;
},
}Sehen Sie sich den Effekt an: Das Datum, an dem dieses Dokument geschrieben wurde, ist der 31.03.2023, wir können nur das Datum vom 01.04. bis zum 10.04. auswählen, daran ist nichts auszusetzen
Firmengeschäft: Wählen Sie einen Datumsbereich aus, aber nur dieser Monat kann ausgewählt werden
Hier stelle ich auch ein von mir geschriebenes Geschäft in der Firma dar. Die Anforderung ist die Auswahl eines Datumsbereichs, und die Anforderung kann nur im aktuellen Monat ausgewählt werden!
1. Verwenden Sie zuerst die Komponente el-date-picker, setzen Sie den Typ auf daterange, damit gibt es kein Problem
<el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
2. So begrenzen Sie den Auswahlbereich auf diesen Monat
Nach einiger Erfahrung oben ist es offensichtlich, dass der Wert von time.getTime() nur an dem Tag wahr sein muss, der kleiner ist als der Anfang des Monats, und wahr an dem Tag, der größer ist als das Ende des Monats Dann ist es viel einfacher, darüber nachzudenken!
① Holen Sie sich den aktuellen Monat
const date = new Date()
const year = date.getFullYear(); //获取年份
let month = date.getMonth() + 1; //获取月份② Den ersten Tag des aktuellen Monats erhalten, der am 1. beginnt Dagegen ist nichts einzuwenden, oder?
const startDate = `${year}-${month}-01 00:00:00`③ Den letzten Tag des aktuellen Monats zu erhalten, ist etwas problematisch, da einige Monate 30 Tage haben, einige Monate 31 Tage und der Februar sogar 28 oder 29. Manche Leute denken vielleicht, dass sie noch beurteilen müssen, ob die aktuelles Jahr ist Schaltjahr oder normales Jahr, und dann die Anzahl der Tage im aktuellen Monat beurteilen, was kompliziert ist.Es gibt einen einfacheren Weg für das js-Datumsobjekt
const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
const endDate = `${year}-${month}-${lastDay} 23:59:59`④ Integrieren Sie die Startzeit und das Endereignis in einen Zeitstempel für eine einfache Berechnung
new Date(startDate).getTime(), new Date(endDate).getTime()⑤ Als Methode mit einem Rückgabeergebnis geschrieben, ist das Rückgabeergebnis ein Array, das zwei Elemente enthält, den Startzeitstempel und den Endzeitstempel
const getDateRange = () => {
const date = new Date()
const year = date.getFullYear(); //获取年份
let month = date.getMonth() + 1; //获取月份
const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
month = month < 10 ? '0' + month : month;
const startDate = `${year}-${month}-01 00:00:00`
const endDate = `${year}-${month}-${lastDay} 23:59:59`
return [new Date(startDate).getTime(), new Date(endDate).getTime()]
}pickerOptions: {
disabledDate(time) {
const [startTimer, endTimer] = getDateRange()
return time.getTime() < startTimer || time.getTime() > endTimer;
},
}Wirkung! Es ist ersichtlich, dass dies der Erfolg der Beschränkung ist!
day.js vereinfachte Version 1
Ich installiere gerne das Paket day.js im Projekt als Plug-in für die Zeitverarbeitung im Projekt --- day.js
Mit diesem Plugin können wir ganz einfach die gewünschte Zeit erreichen.
import dayjs from "dayjs"
const getDateRange = () => {
const startTimer = dayjs().startOf('month').valueOf()
const endTimer = dayjs().endOf('month').valueOf()
return [startTimer, endTimer]
}
pickerOptions: {
disabledDate(time) {
const [startTimer, endTimer] = getDateRange()
return time.getTime() < startTimer || time.getTime() > endTimer;
},
}
day.js vereinfachte Version 2
Die Idee ist, das Plug-in isBetween in day.js zu verwenden, um das Datumsintervall zu beurteilen
import dayjs from "dayjs"
const isBetween = require('dayjs/plugin/isBetween')
dayjs.extend(isBetween)
const getDateRange = () => {
const startDate = dayjs().startOf('month').format("YYYY-MM-DD")
const endDate = dayjs().endOf('month').format("YYYY-MM-DD")
return [startDate, endDate]
}
disabledDate(time) {
const [startDate, endDate] = getDateRange()
const result = dayjs(time).isBetween(startDate, dayjs(endDate), 'day', '[]')
return !result
},
day.js ist sehr leicht, leistungsstark und hat viele Plug-Ins. Wenn Sie es gut verwenden, wird es definitiv ein großer Front-End-Killer sein. Wenn Sie interessiert sind, möchten Sie es vielleicht ausprobieren!
Wenn Sie der Meinung sind, dass dieser Artikel Ihnen ein wenig geholfen oder Ihnen geholfen hat, eine kleine Idee zu entwickeln, bewegen Sie bitte Ihre kleinen Hände, um ihn zu mögen oder so, danke!