zoukankan      html  css  js  c++  java
  • elementUI 日期时间选择器el-date-picker开始时间与结束时间的约束条件

    主要通过添加 :picker-options来约束时间的

    开始时间必须大于当前时间,结束时间必须大于开始时间来加判断

    
    
    beginDate() {
          const self = this;
          return {
            disabledDate(time) {
              debugger;
              if (self.endTime) {
                //如果结束时间不为空,则小于结束时间
                return new Date(self.endTime).getTime() < time.getTime();
              } else {
                // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
              }
            },
          };
        },
        processDate() {
          const self = this;
          return {
            disabledDate(time) {
              if (self.startTime) {
                //如果开始时间不为空,则结束时间大于开始时间
                return new Date(self.startTime).getTime() > time.getTime();
              } else {
                // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
              }
            },
          };
        },
     

    data

    startDatePicker: this.beginDate(),
    endDatePicker: this.processDate(),
     <div class="des-status-df">开始</div>
                  <div class="block">
                    <el-date-picker
                     :picker-options="startDatePicker"
                      v-model="startTime"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </div>
                  <div class="des-status-df">结束</div>
                  <div class="block">
                    <el-date-picker
                     :picker-options="endDatePicker"
                      v-model="endTime"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </div>
  • 相关阅读:
    tomcat使用入门
    IDEA2020 创建springboot项目提示程序包org.springframework.boot不存在 问题
    jvm内存泄露
    tomcat 上设置可以直接访问的图片路径
    服务器上安装mysql后开启远程连接
    图的遍历,BFS和DFS的Java实现
    并查集
    深度优先搜索实现拓扑排序(leetcode210课程表)
    在Java中怎么实现字符'a'转成字符'b'
    MyBatis底层原理
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/15386317.html
Copyright © 2011-2022 走看看