博客

elementUI 时间选择器限制只能选择此刻之后的时间，包括时分秒（借鉴并修改）

根据产品的需求，需要对生效时间进行限制，限制到时间点，百度了好多文章之后，还是使用elementUI时间选择器自带的属性picker-options，二话不说先看效果图

*![这里是限制的当前日期和当前时间点，当前时间点之前的不能选择

#直接上代码吧~~~~
需要引入moment.js进行时间格式的转换

cnpm install moment --save
//在main.js文件中引入
import moment from "moment";
Vue.prototype.$moment = moment;

<el-form-item label="生效时间：" prop="time">
  <el-date-picker v-model="addStockForm.time" type="datetime"      placeholder="选择生效时间" :picker-options="pickerOption" value-format="yyyy-MM-dd HH:mm:ss" :editable="false"  @change="handler">
  </el-date-picker>
</el-form-item>
<script>
export default {
data(){
  return{
    addStockForm: {
        time:''
      },
      pickerOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
         selectableRange:"00:00:00 - 23:59:59",
      },
    }
  },
  watch:{
  "addStockForm.time":{ //需要对绑定的时间进行监听
    handler(newValue, oldValue) {
          if (newValue) {
            let date = new Date();//当前时间
            let min = date.getMinutes();//当前时间的分
            date.setMinutes(min);
            let nowDate = this.$moment(date).format("HH:mm:ss");//当前时分秒
            let st = "";
            if (this.$moment(date).format("yyyy-MM-DD") === this.$moment(newValue).format("yyyy-MM-DD")) {
              let hh1 = this.$moment(newValue).format("HH:mm:ss")
              if(hh1 <= nowDate) {
                this.addStockForm.time = this.$moment(date).format("yyyy-MM-DD HH:mm:ss");
              }
              st = nowDate;
            } else {
              st = "00:00:00";
            }
            this.pickerOption.selectableRange = st + "-23:59:59";
            this.pickerOption = this.pickerOption;
          }
        },
        deep: true,
        immediate: true,
      }
  },
}
<script/>