美文网首页
element DateTimePicker 限制开始时间不能小

element DateTimePicker 限制开始时间不能小

作者: 前端阿峰 | 来源:发表于2021-04-04 08:59 被阅读0次
    • template
    <template>
      <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>
    </template>
    
    • 数据定义
    <script>
    export default {
            data(){
                return{
                    upTime: '',
                    outTime: '',
                    //限制开始时间
                    pickerOptionsStart: {
                        disabledDate(time) {
                            return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
                         }
                      },
                     pickerOptionsEnd: {},
               }
          }
    }
    </script>
    
    • 实现方法
    methods:{
          //结束时间限制开始时间
          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
              }
            })
          },
    }
    

    相关文章

      网友评论

          本文标题:element DateTimePicker 限制开始时间不能小

          本文链接:https://www.haomeiwen.com/subject/clvhkltx.html