vue elemet日期选择器设置开始时间不能大于结束时间并且大于等于今天

深碍√TFBOYSˉ_ 2022-11-05 00:55 392阅读 0赞

今天接了个需求，要求 如下：

*  开始时间
    
     *  大于等于当前时间 也就是大于等于今天
     *  小于等于结束时间
 *  结束时间
    
     *  大于等于当前时间 也就是大于等于今天
     *  大于等于开始时间

效果图如下：  
![element日期选择.gif][element_.gif]

话不多说，直接上代码

<template>
      <div class="hello">
        <el-form
          :model="basicInfo"
          size="mini"
          label-width="100px"
        >
          <el-row>
            
            <el-col :span="12">
              <el-form-item
                label="开始时间："
                prop="startDate"
              >
                <el-date-picker
                  v-model="basicInfo.startDate"
                  type="date"
                  :picker-options="pickerOptionsStart"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择开始时间"
                  style="width: 100%;"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item
                label="结束时间："
                prop="endDate"
              >
                <el-date-picker
                  v-model="basicInfo.endDate"
                  type="date"
                  :picker-options="pickerOptionsEnd"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择结束时间"
                  style="width: 100%;"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>

<script>
    export default { 
      name: 'HelloWorld',
      data() { 
        return { 
          basicInfo: { 
            // 创建时间 此时间可以通过后端接口取服务器时间 或者 用 new Date().getTime()
            createDate: new Date().getTime(),
            startDate: '', // 开始时间
            endDate: '', // 结束时间
          },
          // 开始时间限制
          pickerOptionsStart: { 
            disabledDate: (time) => { 
              if (this.basicInfo.endDate) { 
                // eslint-disable-next-line max-len
                return time.getTime() > new Date(this.basicInfo.endDate).getTime() || time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
              }
              return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
            },
          },
          // 结束时间限制
          pickerOptionsEnd: { 
            disabledDate: (time) => { 
              if (this.basicInfo.startDate) { 
                return time.getTime() < new Date(this.basicInfo.startDate).getTime();
              }
              return time.getTime() <= new Date(this.basicInfo.createDate).getTime() - 86400000;
            },
          },
        };
      },
      mounted() { 
    
      },
      beforeDestroy() { 
      },
      methods: { 
    
      },
    };
    </script>

[element_.gif]: /images/20221023/8c8d71b10a1a47a6871d3ed09d6bc48f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，392人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE-日期选择器-结束时间>开始时间

功能要求：限制结束时间选择范围，结束时间能够选择的起始日期，随着开始时间的选择而变化，也就是保证结束时间时钟>=开始时间。 ![watermark_type_ZmFu

女爷i/ 2023年08月17日 17:46/ 0 赞/ 159 阅读

相关 layui 时间插件关闭-结束不能大于开始等

laydate.render({ elem: 'year', type: 'year', format: 'yyyy',

喜欢ヅ旅行/ 2023年06月25日 10:04/ 0 赞/ 17 阅读

相关 element 校验开始时间小于结束时间,结束时间大于开始时间

<el-col :span="12"> <el-form-item label="期望发货时间：" prop="orderE

男娘i/ 2023年03月12日 14:29/ 0 赞/ 67 阅读

相关 jquery validate 验证结束时间大于开始时间

<td class="vatop rowform"> <input type="text" value="" name="start_time" id="st

末蓝、/ 2023年02月20日 06:44/ 0 赞/ 27 阅读

相关 js验证开始日期不能大于结束日期_15个日期时间计算套路，快快拿走不用谢

小伙伴们好啊，今天老祝和大家一起学习日期时间计算的套路，掌握这些套路，工作效率可以再高一点点。 1、合并日期和时间如下图，如何将A列日期和B列的时间合并到一起，变成既

缺乏、安全感/ 2023年01月04日 13:14/ 0 赞/ 307 阅读

相关 JS 大于等于今天校验

let curDate = new Date(); //获取昨天（不需要等于今天的话注释掉就好了） curDate = curDa

àì夳堔傛蜴生んèń/ 2023年01月02日 03:23/ 0 赞/ 156 阅读

相关 vue elemet日期选择器设置开始时间不能大于结束时间并且大于等于今天

今天接了个需求，要求如下：开始时间大于等于当前时间也就是大于等于今天小于等于结束时间结束时间

深碍√TFBOYSˉ_/ 2022年11月05日 00:55/ 0 赞/ 393 阅读

相关 JS 判断字符串是否为时间格式&开始时间不能大于截止时间

function isdate(str) { var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}

港控/mmm°/ 2022年07月16日 01:59/ 0 赞/ 267 阅读

相关设置type='date'的input标签不能选择大于当前时间的日期

做项目时在用户信息中添加了 '出生年月' 这一字段当时就直接就在页面上写了H5的新特征 input 标签 type='date' <div class="fo

ゝ一纸荒年。/ 2022年05月21日 03:41/ 0 赞/ 268 阅读

相关 iview中日期选择器开始时间与结束时间联动,设置开始时间和结束时间约束

官网例子 <template> <Row> <Col span="12"> <DatePi

太过爱你忘了你带给我的痛/ 2022年02月17日 13:45/ 1 赞/ 1002 阅读