博客

有小伙伴问以下问题，为了方便说明特作此文以解惑

效果如下

选择指定时间以后的时间为结束时间

相关实现代码为

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*/
        
      };
    }