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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM