Element DateTimePicker 两个独立的日期时间选择器，开始日期小于结束日期

ini 复制代码

 <el-form-item>       
   <template slot="label">       
     <div class="flex-center">     
         <img src="../../../assets/img/process/date.png" class="assigin-img" />         
         <span>日期</span>     
     </div>
   </template>   
   <el-date-picker     
       v-model="searchForm.submitStartTime"         
       type="datetime"  
       placeholder="开始日期"           
       popper-class="no-atTheMoment"         
       format="yyyy-MM-dd HH:mm:ss"    
       value-format="yyyy-MM-dd HH:mm:ss"       
       :picker-options="pickerAddStart(searchForm.submitEndTime)"         
       @change="($event) => limitDate('start', $event)"          
    >            
    </el-date-picker>         
   <span style="font-size: 14px; margin: 0 8px">至</span>      
   <el-date-picker      
      v-model="searchForm.submitEndTime"       
      type="datetime"       
      placeholder="结束日期"      
      popper-class="no-atTheMoment"      
      format="yyyy-MM-dd HH:mm:ss"     
      value-format="yyyy-MM-dd HH:mm:ss"      
      :picker-options="pickerAddEnd(searchForm.submitStartTime)"      
      @change="($event) => limitDate('end', $event)"         
    >     
    </el-date-picker>     
 </el-form-item>

使用 picker-options 当前时间日期选择器特有的选项参考下表，设置限制条件

javascript 复制代码

export default {
  data() {
    return {
      pickerAddStart(endTime) {
        let selectableRange = ""; //可选时间范围
        if (endTime) {
          selectableRange = `00:00:00 - ${endTime.split(" ")[1]}`;
        } else {
          selectableRange = "00:00:00 - 23:59:59";
        }
        return {
          disabledDate(time) {
            if (endTime) {
              return time.getTime() > new Date(endTime).getTime();
            }
          },
          selectableRange: selectableRange,
        };
      },
      pickerAddEnd(startTime) {
        let selectableRange = "";
        if (startTime) {
          selectableRange = `${startTime.split(" ")[1]} - 23:59:59`;
        } else {
          selectableRange = "00:00:00 - 23:59:59";
        }
        return {
          disabledDate(time) {
            if (startTime) {
              // 不加1会出现00:00:00时，结束时间可以选择开始时间的前一天
              return (
                time.getTime() < new Date(startTime).getTime() - 8.64e7 + 1
              ); // - 8.64e7 表示可选择当天时间
            }
          },
          selectableRange: selectableRange,
        };
      },
     };
  },
};

添加下面这个方法是因为，点击"确定"按钮会获取到当前时间，不受picker-options的限制并赋值到输入框中

typescript 复制代码

limitDate(type, date) {
      let dateTime = new Date(date).getTime();
      //开始时间的时间戳不能大于结束时间
      if (
        type == "start" &&dateTime &&this.searchForm.submitEndTime &&dateTime > new Date(this.searchForm.submitEndTime).getTime()
      ) {
        this.$message.error("开始时间不能大于结束时间！");
        this.searchForm.submitStartTime = "";
      }
      if (
        type == "end" &&dateTime &&this.searchForm.submitStartTime &&dateTime < new Date(this.searchForm.submitStartTime).getTime()
      ) {
        this.$message.error("结束时间不能小于开始时间！");
        this.searchForm.submitEndTime = "";
      }
 },

做完这一系列操作后，DateTimePicker自带的"此刻""无法使用，我们只需要用css将它隐藏掉即可。 popper-class 自定义下拉框的类名

ini 复制代码

/* 时间控件去掉"此刻" 在时间控件上添加 popper-class="no-atTheMoment" */
.el-picker-panel.no-atTheMoment .el-button--text.el-picker-panel__link-btn {
  display: none;
}