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

最新推荐文章于 2023-05-10 14:25:18 发布

原创最新推荐文章于 2023-05-10 14:25:18 发布 · 1.8k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何使用Element UI中的日期选择器组件实现课程开始和结束时间的选择限制，确保所选时间既符合逻辑又不会早于当前时间。

方法：利用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()
            );
          }
        }
      },

这里在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 = "";
        }
      }
    }

标签

#vue.js #elementui #javascript