element时间组件，只能选此刻之前（或此刻之后）

//只能选此刻之前日期与时间：

<el-form-item
    label="事发时间"
    prop="happenTime"
    class="work-item-label"
 >
    <el-date-picker
        v-model="ruleForm.happenTime"
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"
        placeholder="选择事发时间"
        :picker-options="pickerOptions"
     >
     </el-date-picker>
</el-form-item>

data() {
    return {
        //时间限制
        pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6;
            },

              selectableRange: '00:00:00 - 23:59:59' // 限制到秒

      }
};

 watch: {

    //选择当天，则自动显示此刻时间，选择之前日期，则从零点开始

    'ruleForm.happenTime': {

      handler(newValue) {

        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');

            this.ruleForm.happenTime = this.$moment(date).format(

              'yyyy-MM-DD HH:mm:ss'

            );

            // if (hh1 >= nowDate) {

            //   this.ruleForm.happenTime = this.$moment(date).format(

            //     'yyyy-MM-DD HH:mm:ss'

            //   );

            // }

            st = nowDate;

          } else {

            st = '23:59:59';

          }

          this.pickerOptions.selectableRange = '00:00:00 -' + st;

        }

      },

      deep: true,

      immediate: true

    }

  },

 

特别注意：

需要引入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>

 

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,
      }
  },

 

 

原文链接：https://blog.csdn.net/weixin_49072460/article/details/121743298