Vue 相关

element DateTimePicker 限制开始时间不能小

2018-11-26  本文已影响0人  醉笙情丶浮生梦

html代码:

      <el-form-item label="上线时间"  prop="upTime">
        <el-date-picker v-model="form.upTime" type="datetime" class="inputw" :picker-options="pickerOptionsStart"
          placeholder="选择日期时间" default-time="12:00:00" @change="changeEnd">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="下线时间"  prop="outTime">
        <el-date-picker v-model="form.outTime" type="datetime" class="inputw" :picker-options="pickerOptionsEnd"
          placeholder="选择日期时间" default-time="12:00:00" @change="changeStart">
        </el-date-picker>

数据定义:

        upTime: '',
        outTime: '',
        //限制开始时间
        pickerOptionsStart: {
          disabledDate(time) {
            return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
          }
        },
        pickerOptionsEnd: {},

实现方法

      //结束时间限制开始时间
      changeStart() {

        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          // 可通过箭头函数的方式访问到this
          disabledDate: (time) => {
            //这样写有bug 
            //   return  this.outTime < time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
            var times = '';
            //百度没搜到试了好久才试出来
            times = this.outTime < time.getTime() || time.getTime() < new Date(new Date().toLocaleDateString())
              .getTime();
            //打印了几百条
            // console.log("times时间",times);
            return times
          }
        })

      },
      //开始时间 控制结束时间   
      changeEnd() {

        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {

            return time.getTime() < this.upTime
          }
        })
      },
上一篇 下一篇

猜你喜欢

热点阅读