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

深碍√TFBOYSˉ_ 2022-11-05 00:55 331阅读 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 条评论，331人围观）

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

相关阅读

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

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

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

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

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

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

相关 JS 大于等于今天校验

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

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

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

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

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

相关 Calendar 日期判断等于、小、。大于

public static void main(String[] args) throws Exception { String startTime = "2

拼搏现实的明天。/ 2022年10月10日 04:57/ 0 赞/ 151 阅读

相关 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 赞/ 209 阅读

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

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

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

相关 bootstrap-datepicker关于开始时间小于结束时间且都大于当前时间的控制

//==========================HTML======================================= <div class="col

我不是女神ヾ/ 2022年03月26日 12:47/ 0 赞/ 406 阅读

相关关于活动开始时间大于结束时间的验证

//==========关于活动开始时间大于结束时间的判断============== ![watermark_type_ZmFuZ3poZW5naGVpdGk_shad

Myth丶恋晨/ 2022年03月26日 08:52/ 0 赞/ 265 阅读

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

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

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