场景：
1、开始时间不得晚于结束时间；结束时间不得早于开始时间；
2、开始时间与结束时间之间，有可选择的天数间隔，只可选择间隔日期内的日期；
例如：设置间隔时间为5天；日期的取值范围，如下：
-05-26 00:00:00——-05-30 23:59:59
-05-26 10:00:00——-05-31 10:00:00
效果：
完整代码：
<template><div><el-button @click="dialogVisible = true">打开</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><el-form ref="form" :model="form" :rules="rules" label-width="120px"><el-form-item label="开始时间" prop="start"><el-date-pickertype="datetime"placeholder="请输入开始时间"v-model="form.start"style="width: 100%"value-format="yyyy-MM-dd HH:mm:ss"@change="ksTime"></el-date-picker></el-form-item><el-form-item label="结束时间" prop="end"><el-date-pickertype="datetime"placeholder="请输入结束时间"v-model="form.end"style="width: 100%"value-format="yyyy-MM-dd HH:mm:ss":picker-options="pickerEndOptions"></el-date-picker></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button type="primary" @click="onsubmit('form')">确 定</el-button><el-button @click="close('form')">取 消</el-button></span></el-dialog></div></template><script>export default {watch: {'form.end':{handler(newValue, oldValue) {if(newValue && this.form.start){const st = this.form.start.split(' ')[1];//检测两个日期是否为同一天const datesAreOnSameDay = (first, second) =>first.getFullYear() === second.getFullYear() &&first.getMonth() === second.getMonth() &&first.getDate() === second.getDate();// 1、如果是同一天的话，时间不能早于开始时间；// 2、如果是最后一天的话，时间不能晚于开始时间；if(datesAreOnSameDay(new Date(newValue), new Date(this.form.start))){this.pickerEndOptions.selectableRange = [`${st} - 23:59:59`];}else if(datesAreOnSameDay(new Date(new Date(this.form.start).getTime()+1000*60*60*24*this.optionalDate), new Date(newValue))){this.pickerEndOptions.selectableRange = [`00:00:00 - ${st}`];}else{this.pickerEndOptions.selectableRange = [`00:00:00 - 23:59:59`];}}}} },data() {return {// 间隔天数optionalDate:5,// 日期限制pickerEndOptions: {disabledDate: (time) => {if (this.form.start) {const st = this.form.start.split(' ')[1];let dateTime = new Date(this.form.start);let startDateTime = dateTime.setDate(dateTime.getDate() - (st=='00:00:00'? 0: 1));let endDateTime = dateTime.setDate(dateTime.getDate() + (st=='00:00:00'?this.optionalDate-1:this.optionalDate+1));return (time.getTime() < new Date(startDateTime).getTime() ||time.getTime() > new Date(endDateTime).getTime());}},// 限制时间selectableRange: []},dialogVisible: false,form: {start: "",end: "",},rules: {start: [{required: true,message: "开始时间不能为空",trigger: ["blur", "change"],},],end: [{required: true,message: "结束时间不能为空",trigger: ["blur", "change"],},],},};},methods: {// 选择开始日期ksTime(){this.form.start && (this.form.end = '')},// 关闭弹窗的二次确认handleClose(done) {this.$confirm("确认关闭？").then((_) => {this.close('form');done();}).catch((_) => {});},// 提交onsubmit(formName) {this.$refs[formName].validate((valid) => {if (valid) {console.log({ ...this.form });this.close(formName);} else {console.log("error submit!!");return false;}});},// 关闭close(formName) {// 重置表单this.$nextTick(() => {this.$refs[formName].resetFields();});this.dialogVisible = false;},}};</script><style scoped></style>
【ElenmentUI el-date-picker日期选择器 结束时间不得早于开始时间 且只能选择距开始时间指定天数的日期】
