vue+iview中日期时间选择器不能选择当前日期之前包括时分秒

本文链接：https://blog.csdn.net/zxiuping/article/details/126298204

iview的时间日期选择器DatePicker中的type="datetime"，

日期限制不能选择当前日期之前的日期可以使用属性options，

现有需求限制时分秒也不能选择当前的可以使用属性time-picker-options，time-picker-options有几个参数分别是disabledHours、disabledMinutes、disabledSeconds

此外还有一个steps在此就不多说了，有需要可以去了解官网

上代码：

下面是html代码

<DatePicker
            v-model="formValidate.captchaEffectTime"
            :options="options4"
            :time-picker-options="{disabledHours: disabledHours,disabledMinutes:disabledMinutes,disabledSeconds:disabledSeconds}"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder=""/>

接下来是data初始化中的代码：

options4: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000// 不能选今天之前的日期
          // return date && date.valueOf() > Date.now() - 86400000;//不能选今天和今天之后的日期
        //   return date && date.valueOf() > Date.now()// 不能选今天之后的日期
        }
      },
disabledHours: [], // 审批不可选择时
      disabledMinutes: [], // 审批不可选择分
      disabledSeconds: []// 审批不可选择秒

下面是定义当前时间之前的时分秒，限制可选择：

getTimePickerOptions () {
      let d = new Date()
      let hour = d.getHours()
      let minute = d.getMinutes()
      let second = d.getSeconds()

      for (let i = 0; i < hour; i++) {
        this.disabledHours[i] = i
      }
      for (let i = 0; i < minute; i++) {
        this.disabledMinutes[i] = i
      }
      for (let i = 0; i < second; i++) {
        this.disabledSeconds[i] = i
      }
      // console.log(this.disabledHours)
      // console.log(this.disabledMinutes)
      // console.log(this.disabledSeconds)
    },

getTimePickerOptions方法可以在需要的时候调用，

到此就完成啦，希望可以帮助到各位同学o(*￣▽￣*)ブ