elementui日期选择器设置开始时间不能大于结束时间

鹏仔工作室

已于 2022-10-28 13:41:25 修改

阅读量6.6k

点赞数 11

分类专栏： vue 文章标签： vue elementui

于 2020-12-18 16:49:09 首次发布

前端共享博客 http://sharedbk.com

本文链接：https://blog.csdn.net/tianpeng1996/article/details/111383391

版权

vue 专栏收录该内容

27 篇文章 4 订阅

订阅专栏

elementui日期选择器控制结束日期不能小于开始日期

iView 日期时间选择器设置开始时间至结束时间限制 iView 日期时间选择器设置开始时间至结束时间限制

elementui 日期选择器设置开始时间不能大于结束时间，结束时间不能小于开始时间

简单容易，就不做详细解释了，复制粘贴，修改对应参数名即可

    <el-date-picker
      v-model="startTime"
      size="small"
      type="date"
      placeholder="开始时间"
      :picker-options="pickerOptionsStart"
    >
    </el-date-picker>
    <el-date-picker
      size="small"
      v-model="endTime"
      type="date"
      placeholder="结束时间"
      :picker-options="pickerOptionsEnd"
    >

  data() {
    return {
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.endTime) {
            return (
              time.getTime() >= new Date(this.endTime).getTime()
            );
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.startTime) {
            return (
              time.getTime() <= new Date(this.startTime).getTime()
            );
          }
        }
      }
    }
  }

【推荐】前端软件下载 Q站-软件下载