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;
}
相关推荐
前端一小卒1 分钟前
《深入浅出 React 19:AI 视角下的源码解析与进阶》- diff算法核心
前端·javascript·react.js
半世浮生4 分钟前
uniapp开发微信路由踩坑
前端·uni-app
Moment6 分钟前
通过 Mac 自动的 say 命令学习粤语真的太好玩了 😏😏😏
前端·javascript·后端
JarvanMo8 分钟前
我差点放弃移动开发(以及是什么让我回来了)
前端
爱学习的茄子9 分钟前
回流与重绘:性能优化的幕后英雄
前端·javascript·深度学习
Mintopia9 分钟前
计算机图形学中的摄像机系统:从像素世界的眼睛说起
前端·javascript·计算机图形学
信也科技布道师10 分钟前
高安全前端架构:Rust-WASM 黑盒技术揭秘
前端
G等你下课20 分钟前
动手实现一个简易前端路由:理解 React Router 的本质
前端·javascript·react.js
Mintopia21 分钟前
Three.js 3D 柱状图制作指南:从像素到立体的魔法之旅
前端·javascript·three.js
南岸月明21 分钟前
新人开启副业,这些坑你一定要知道
前端