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>
  • 相关阅读:
    JS Dom_API
    JS 动态表格(添加、删除行)
    将本地网页上传到 apache2 及 github 的步骤
    软件工程之美 第一周
    树莓派安装芯片驱动并测试
    Visoul Studio 2019 远程调试 中文乱码
    Visoul Studio 2019 远程调试 RaspberryPi C 项目
    课设提纲
    PHP PDO 一 : 常用方法
    设置子域名及申请其证书
  • 原文地址:https://www.cnblogs.com/shuihanxiao/p/15386317.html
Copyright © 2011-2022 走看看