ElementUI设定开始和结束时间只能选择同一天内不同的时分秒，且结束时间不能晚于开始时间

需求：1、开始和结束时间只能选择同一天内不同的时分秒；2、结束时间不能晚于开始时间；3、选定某一天后，在该天之前和之后的日期均为不可选状态。

实现思路：将el-date-picker的type设为datetime，通过 picker-options 属性来限制某一天的时间区间且实现在该天之前和之后的日期均为不可选状态；通过onChange事件控制结束时间不能晚于开始时间；

好了，直接上代码：

​
<template>
  <div class="user-container">
    <el-dialog v-dialogDrag :title="title" :visible.sync="addFlag"  :appendToBody="true" width="30%">
        <el-form-item prop="startTime" label="开始时间："> 
          <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="请选择开始时间" default-time="09:00:00" value-format="yyyy-MM-dd HH:mm:ss"/>
        </el-form-item>
        <el-form-item prop="endTime" label="结束时间："> 
          <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="请选择结束时间" default-time="11:00:00" :picker-options="pickerOptionsEnd" @change="endTimeChange" value-format="yyyy-MM-dd HH:mm:ss"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="AddOrUpdateClick()">确定</el-button>
          <el-button type="primary" @click="closeFlag">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {TickAddOrUpdate} from "@/api/user";
export default {
  name: "containerList",
  data () {
    return {
      pickerOptionsEnd: {
		disabledDate: (time) => {
		  if (this.ruleForm.startTime) {
            const startTime = this.ruleForm.startTime.substr(0,10) + ' 00:00:00';
            const endTime = this.ruleForm.startTime.substr(0,10) +  ' 23:59:59';
			return (
					time.getTime() < new Date(startTime).getTime() || time.getTime() > new Date(endTime).getTime()//确保开始时间和结束时间只能选择某一天的时分秒
						)
					}
				},
			}
    }
  },
}

​

​​​​​​​

用onChange事件控制结束时间不能晚于开始时间：

    //预约时段结束时间 onChange
    endTimeChange(val){
      if(!this.ruleForm.startTime){
        this.$message.warning('请先选择开始时间！');
        this.ruleForm.endTime = '';
        return;
      }
      if(this.ruleForm.startTime>=val){
        this.ruleForm.endTime = '';
        this.$message.warning('结束时间需晚于开始时间！');
        return;
      }
    },

各位友友们，记得点赞收藏呦👍。