欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementUI中日期时间插件(DateTimePicke) 限制结束时间大于指定的开始时间并且结束时间小于当前时间

程序员文章站 2024-03-24 09:20:04
...

有小伙伴问以下问题,为了方便说明特作此文以解惑
elementUI中日期时间插件(DateTimePicke) 限制结束时间大于指定的开始时间并且结束时间小于当前时间

效果如下

选择指定时间以后的时间为结束时间
elementUI中日期时间插件(DateTimePicke) 限制结束时间大于指定的开始时间并且结束时间小于当前时间
elementUI中日期时间插件(DateTimePicke) 限制结束时间大于指定的开始时间并且结束时间小于当前时间

相关实现代码为

HTML

  <div class="block">
    <span class="demonstration">开始时间:</span>
    <el-date-picker
      v-model="startTime"
      type="datetime"
      :picker-options="startTimeRule"
       
      placeholder="选择日期时间">
    </el-date-picker>
  </div>
  <br/>
  <div class="block">
    <span class="demonstration">结束时间:</span>
    <el-date-picker
      v-model="endTime"
      type="datetime"
      :picker-options="endTimeRule"         
      placeholder="选择日期时间">
    </el-date-picker>
  </div>

JS

data() {
      return {   
        startTime: new Date(2020, 00, 17, 23, 55),
        endTime: '',
         /* start  */
        startTimeRule: {
          disabledDate: time => {
            if (this.endTime) {
              return (
                time.getTime() > new Date(this.endTime).getTime()
              );
            } else {
              return time.getTime() > Date.now();
            }
          }
        },
        endTimeRule: {
          disabledDate: time => {
            if (this.startTime) {
              return (
                time.getTime() > Date.now() ||
                time.getTime() < new Date(this.startTime).getTime()
              );
            } else {
              return time.getTime() > Date.now();
            }
          }
        },
        /* end*/
        
      };
    }
相关标签: element