zoukankan      html  css  js  c++  java
  • el-date-picker 结束时间大于等于开始时间,早于今天的时间不可选

    <el-col style="calc(42.2%);padding:0;">
        <el-date-picker 
            :clearable="false" 
            :type="dateType" 
            placeholder="选择开始时间" 
            :format="dateFormat" 
            :value-format="dateFormat" 
            v-model="starttime"
            :picker-options="pickerOptions0"
            :default-time="startDefaultTime"
            style=" 100%;"
            @change="handleStartTime(starttime)"
            clearable>
        </el-date-picker>
    </el-col>
    <el-col class="line" style="text-align:center;calc(15%);">-</el-col>
    <el-col style="calc(42.2% );padding:0;">
          <el-date-picker 
            :clearable="false" 
            :type="dateType" 
            placeholder="选择结束时间"
            :format="dateFormat" 
            :value-format="dateFormat" 
            v-model="endtime"
            :picker-options="pickerOptions1"
            style=" 100%;"
            :default-time="endDefaultTime"
            @change="handleEndTime(endtime)" clearable>
          </el-date-picker>
    </el-col>

    配置:

    // 判断两个时间 结束时间不能大于开始时间
          pickerOptions0: {
            disabledDate: (time) => {
              // let beginDateVal = new Date(this.endtime).getTime()
              // if (beginDateVal) {
              //   return (time.getTime() > beginDateVal) || (time.getTime() > Date.now())
              // } else {
                return time.getTime() < Date.now() - 8.64e7
              // }
            }
          },
          pickerOptions1: {
            disabledDate: (time) => {
              let beginDateVal = new Date(this.form.startTime).getTime()
              if (beginDateVal) { // 等于的时候是临界值00:00:00
                return (time.getTime()) <= beginDateVal - 8.64e7
              } else {
                return time.getTime() < Date.now() - 8.64e7 
              }
            }
          }

    效果:

  • 相关阅读:
    List集合之Vector分析
    List集合之ArrayList分析
    Linux下的tar压缩解压缩命令详解
    第五次会议(4.7)
    第四次会议(3.31)
    第三次会议(3.17)
    第二次会议(3.9)
    第一次会议(3.1)
    团队的Kick off
    Parse error: syntax error, unexpected T_ENDFOREACH in..报错处理
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/13879760.html
Copyright © 2011-2022 走看看