解决Element DateTimePicker开始时间和结束时间大小关系

方法：利用picker-options属性

效果：

①开始时间和结束时间不能小于当前时间；

②结束时间大于开始时间，开始时间小于结束时间；

HTML

          <el-form-item label="开始时间:">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="datetime"
              placeholder="选择开始时间"
              default-time="12:00:00"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="startTime"
              @change="estimateTime"
              style="width:100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-date-picker
              v-model="ruleForm.endTime"
              type="datetime"
              placeholder="选择结束时间"
              default-time="12:00:00"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="endTime"
              @change="estimateTime"
              style="width:100%"
            ></el-date-picker>
          </el-form-item>

Data

 ruleForm:{
  startTime: "",
  endTime: "",
}
// 日期限制
      startTime: {
        disabledDate: time => {
          if (this.ruleForm.endTime) {
            // 设置开始时间大于结束时间
            return (
              time.getTime() > new Date(this.ruleForm.endTime).getTime() ||
              time.getTime() < Date.now() - 86400000
            );
          } else {
            // 设置开始时间小于当前时间
            return (
              time.getTime() <
              new Date(new Date().toLocaleDateString()).getTime()
            );
          }
        }
      },
      // 结束时间大于开始时间
      endTime: {
        disabledDate: time => {
          if (this.ruleForm.startTime) {
            return (
              time.getTime() <
              new Date(this.ruleForm.startTime).getTime() - 86400000
            );
          } else {
            // 设置开始时间小于当前时间
            return (
              time.getTime() <
              new Date(new Date().toLocaleDateString()).getTime()
            );
          }
        }
      },

JS

这里在Date.now() - 60000，让比较的时间延期一分钟，让我们可以使用日期里面的“此刻”功能

    // 判断结束时间是否大于开始时间，选择的时间是否大于当前时间
    estimateTime() {
      if (this.ruleForm.startTime && this.ruleForm.endTime) {
        console.log(this.ruleForm.startTime, this.ruleForm.endTime);
        let res =
          new Date(this.ruleForm.startTime).getTime() <
            new Date(this.ruleForm.endTime).getTime() &&
          new Date(this.ruleForm.startTime).getTime() > Date.now() - 60000 &&
          new Date(this.ruleForm.endTime).getTime() > Date.now() - 60000;
        if (!res) {
          this.$message({
            message: "课程起止时间错误",
            type: "warning"
          });
          this.ruleForm.endTime = this.ruleForm.startTime = "";
        }
      }
    }

最后

以上就是忧心世界为你收集整理的解决Element DateTimePicker开始时间和结束时间大小关系的全部内容，希望文章能够帮你解决解决Element DateTimePicker开始时间和结束时间大小关系所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。