el-date-picker开始日期不能大于结束日期

最新推荐文章于 2024-07-31 14:01:28 发布

黑魔仙小拓

最新推荐文章于 2024-07-31 14:01:28 发布

阅读量1.9k

点赞数 2

分类专栏： ElementUI 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/T70H78/article/details/120880637

版权

ElementUI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了在前端开发中使用`el-date-picker`组件实现启用和停用日期的选择，并通过`v-model`、`@change`事件及时间格式化进行数据绑定和校验。当启用日期大于停用日期时，会触发错误提示，确保输入的日期逻辑正确。

摘要由CSDN通过智能技术生成

 <el-col :span="12">
                  <el-form-item label="启用日期:">
                    <div class="dateBox disableClass">
                      <el-date-picker
                        v-model="addForm.actionStartTime"
                        type="date"
                        placeholder="无限期"
                        format="yyyy-MM-dd"         //format指定输入框的格式
                        value-format="yyyy-MM-dd"  //value-format指定绑定值返回给后台的格式
                        @change="startChange"      //定义一个change事件
                        style="width:300px"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="停用日期:">
                    <div class="dateBox disableClass">
                      <el-date-picker
                        v-model="addForm.actionEndTime"
                        type="date"
                        placeholder="无限期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="endChange"        //定义一个change事件
                        style="width:300px"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>

startChange(value) {
      this.$set(this.addForm, "actionStartTime", value);
      if (
        new Date(value).getTime() >=
        new Date(this.addForm.actionEndTime).getTime()
      ) {
        this.addForm.actionStartTime = "";
        this.$message.error("请选择的时间小于停用时间");
      }
    },
    endChange(value) {
      this.$set(this.addForm, "actionEndTime", value);
      if (
        new Date(value).getTime() <=
        new Date(this.addForm.actionStartTime).getTime()
      ) {
        this.addForm.actionEndTime = "";
        this.$message.error("请选择的时间大于启用时间");
      }