vue el-date-picker禁用当前日期之前的日、小时、分钟

html:

<el-date-picker v-model="form.times" type="datetime" placeholder="选择日期时间" :picker-options="pickerOptions">
              </el-date-picker>

js:

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // 禁用当前日期之后的日期
          return time.getTime() > moment();
        },
        // 设置时间选择范围
        selectableRange: "00:00:00 - 23:59:59",
      },
    }
  },
  watch: {
    "form.times"(selectTime) {
      // 当选择的日期就是当天的时候,这个时候就要限制时间应当小于此时此刻的时分秒
      if (moment(selectTime).format("l") === moment(new Date()).format("l")) {
        const data = new Date();
        const hour = data.getHours();
        const minute = data.getMinutes();
        const second = data.getSeconds();
        this.$set(
          this.pickerOptions,
          "selectableRange",
          `00:00:00 - ${hour}:${minute}:${second}`
        );
      } else {
        // 当选择的日期小于当天的时候,这时需要把时分秒的限制放开,否则不能选择
        this.$set(this.pickerOptions, "selectableRange", "00:00:00 - 23:59:59");
      }
    },
  },
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值