Requirement: There are two sets of time selectors. The time of the first set needs to be included in the second set of time. After the selection of the first set is completed, when the second set is selected, the time included in the first set cannot be selected. Time period
<el-form-item label="Registration start time" prop="startTime">
<el-date-picker
v-model="stuckbooklist.startTime"
type="date"
placeholder="Select registration start date"
>
</el-date-picker>
</el-form-item>
<el-form-item label="Registration end time" prop="endTime">
<el-date-picker
v-model="stuckbooklist.endTime"
type="date"
placeholder="Select registration end date"
>
</el-date-picker>
</el-form-item>
<el-form-item label="behavior start time" prop="behaviorStartTime">
<el-date-picker
v-model="stuckbooklist.behaviorStartTime"
type="date"
placeholder="Select behavior start date"
:picker-options="behaviorStartTimeOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item label="behavior end time" prop="behaviorEndTime">
<el-date-picker
v-model="stuckbooklist.behaviorEndTime"
type="date"
placeholder="Select behavior end date"
:picker-options="behaviorEndTimeOptions"
>
</el-date-picker>
</el-form-item>
The restriction method is as follows
data in data
data(){
return {
startTime: new Date(),
endTime: new Date(),
behaviorStartTime: new Date(),
behaviorEndTime: new Date(),
}
}
time reassignment
mounted() {
// today
var today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0);
var oneday = 1000 * 60 * 60 * 24;
// Yesterday (start-end)
var yesterday = new Date(today - oneday);
this.stuckbooklist.startTime = yesterday;
this.stuckbooklist.behaviorStartTime = yesterday;
this.stuckbooklist.endTime = new Date(today - 1);
this.stuckbooklist.behaviorEndTime = new Date(today - 1);
},
Restriction method
computed: {
behaviorStartTimeOptions() {
// Limit the start time range of the second set of date pickers
return {
disabledDate: (date) => {
if (this.stuckbooklist.startTime) {
const originalDate = new Date(this.stuckbooklist.startTime);
// Subtract one day from the date
originalDate.setDate(originalDate.getDate() + 1);
return date >= originalDate;
}
return false;
},
};
},
behaviorEndTimeOptions() {
// Limit the end time range of the second set of date pickers
return {
disabledDate: (date) => {
if (this.stuckbooklist.endTime) {
const originalDate = new Date(this.stuckbooklist.endTime);
// Subtract one day from the date
originalDate.setDate(originalDate.getDate() - 1);
return date <= originalDate;
}
return false;
},
};
},
},
Processing judgment can be made when sending a request
dayclick() {
this.time();
let a = new Date(this.stuckbooklist.startTime).getTime();
let b = new Date(this.stuckbooklist.endTime).getTime();
let c = new Date(this.stuckbooklist.behaviorStartTime).getTime();
let d = new Date(this.stuckbooklist.behaviorEndTime).getTime();
if (b - a >= 2592000000) {
return this.$modal.msgWarning("Please modify the registration time range to within 30 days");
} else {
if (d - c >= 2592000000) {
return this.$modal.msgWarning("Please modify the behavior time range within 30 days");
} else {
if (c > a)
return this.$modal.msgWarning("Modify the relationship between registration and behavior start time");
if (d < b)
return this.$modal.msgWarning("Modify the relationship between registration and behavior end time");
this.$refs.queryForm.validate(async (valid) => {
if (valid) {
this.loading = true;
this.statementstyle = 1;
this.time();
await getstatementretained({ ...this.stuckbooklist }).then(
(res) => {
if (res.code === 200) {
this.typeList = res.rows;
this.total = res.total;
this.loading = false;
} else {
this.loading = false;
}
}
);
}
});
}
}
},
handling of time
time() {
this.stuckbooklist.startTime = this.formatDate(
this.stuckbooklist.startTime
);
this.stuckbooklist.endTime = this.endformatDate(
this.stuckbooklist.endTime
);
this.stuckbooklist.behaviorStartTime = this.formatDate(
this.stuckbooklist.behaviorStartTime
);
this.stuckbooklist.behaviorEndTime = this.endformatDate(
this.stuckbooklist.behaviorEndTime
);
},
// Time format processing
formatDate(cellValue) {
if (cellValue == null || cellValue == "") return "";
var date = new Date(cellValue);
var year = date.getFullYear();
var month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = "00";
// date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = "00";
// date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = "00";
// date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return (
year +
"-" +
month +
"-" +
day +
" " +
hours +
":" +
minutes +
":" +
seconds
);
},
endformatDate(cellValue) {
if (cellValue == null || cellValue == "") return "";
var date = new Date(cellValue);
var year = date.getFullYear();
var month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = "23";
// date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = "59";
// date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = "59";
// date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return (
year +
"-" +
month +
"-" +
day +
" " +
hours +
":" +
minutes +
":" +
seconds
);
},
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry-level skills treeVue componentsGlobal and local components 39506 people are learning the system