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 
              }
            }
          }

    效果:

  • 相关阅读:
    JAVAWEB 一一框架整合(SSI : Spring+SpringMVC+ ibtis)
    接口一一默认方法
    内部类
    java抽象类的使用
    Node(十)之Mongoose配合Node路由实现邮箱注册登录(Post版)
    Node(九)之Node配合MongoDB实现简单的注册登录
    Node(八)之MongoDB简单应用
    JS案例:Ajax实现简单局域网聊天室
    JS瀑布流懒加载案例
    JS表格小案例
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/13879760.html
Copyright © 2011-2022 走看看