element-ui el-date-picker控制开始时间不能大于结束时间

应用场景是项目中的条件查询,开始时间不能大于结束时间,反之结束时间不能小于开始时间,如下图:
在这里插入图片描述
HTML:

	<el-form-item label="查询时间:">
        <el-date-picker
          v-model="params.beginDate"
          :picker-options="startTime"
          type="date"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期:"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="至" label-width="26px" align="center">
        <el-date-picker
          :picker-options="endTime"
          v-model="params.endDate"
          type="date"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>

JS:

data(){
    return{
        params:{
	        endDate: "", //结束时间
	        beginDate: "" //开始时间
        },
     /* start 开始时间小于今天,结束时间不能大于开始时间 */
      startTime: {
        disabledDate: time => {
          if (this.params.endDate) {
            return (
              time.getTime() > new Date(this.params.endDate).getTime()//这里的this.params.endData按自己的字段参数来
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.params.beginDate) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() < new Date(this.params.beginDate).getTime() //这里的this.params.beginDate按自己的字段参数来
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      /* end*/
    }
}

注意,这里的方法都是放在data里的哦

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值