elementui时间控件限制可选时间范围(精确到时分秒)

elementui时间控件限制可选时间范围(精确到时分秒)

我们在开发web端项目时，时间控件用的非常多，限制可选时间也是比较常见的需求，比如已经过去时间不能选，或这未来的时间不可选等，如果仅仅只是限制年月日那非常好解决，那如果是精确到时分秒呢？其实也很简单，接下来看看我的需求（我的需求是过去的时间不能选并且要精确到时分秒），话不多说上代码：

//我们在vue中的data中定义一个对象，绑定给时间组件
expireTimeOption: {
   selectableRange:`${moment().format('HH:mm:SS')} - 23:59:59`,//这里是限制可选时间到时分秒
   //用当前时间减去一整天的时间，得到的就是当前时间到晚上13：59：59的区间
   disabledDate(date) {//这里是限制可选时间到年月日的
     //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
     return date.getTime() < Date.now() - 3600 * 1000 * 24;
    },
 },

本以为就这样结束了，一个限制年月日，一个限制时分秒，但是会有一个bug，假如现在是早上8点，那明天的8点之前都不可以选了，这明显是不对的，那我们如何解决呢？上代码

//使用watch时间监听时间控件的值
watch: {
    'form.startTime'(selectTime) {
      const date = moment(selectTime).format('YYYY-MM-DD');
      const today = moment().format('YYYY-MM-DD');
      if (date === today){//如果选择是日期是当天
         // 先把时间控件的值赋值当前时间
        this.form.startTime = moment().format('YYYY-MM-DD HH:mm:SS')
         //然后限制时间小于此时此刻的时分秒不可选
        this.expireTimeOption.selectableRange = `${moment().format('HH:mm:SS')} - 23:59:59`
      } else {//如果选择是日期是明天或者更远的时间
        // 先把时间控件的值赋值为一天的的开始
        this.form.startTime = moment().format('YYYY-MM-DD 00:00:00')
        // 然后把时分秒的限制放开
        this.expireTimeOption.selectableRange = '00:00:00 - 23:59:59'
      }
    },
}