elementUI时间选择器写开始结束时间选择

image.png

1.html代码

<div class="title-item">
                <span class="ml10">开始时间</span>
            <el-date-picker style="width: 200px;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" :picker-options="pickerOptionsStart" @change="focusNext" v-model="searchDate.startTime" type="datetime" placeholder="选择日期">
            </el-date-picker>
            </div>
            <div class="title-item">
                <span class="ml10">结束时间</span>
            <el-date-picker style="width: 200px;" id="nextPicker" v-model="searchDate.endTime" type="datetime" placeholder="选择日期" :picker-options="pickerOptionsEnd" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59">
            </el-date-picker>
            </div>

2.data定义值

data() {
            return {
                searchDate:{
                    startTime: null,
                    endTime: null,
                },
                pickerOptionsStart: {
                    disabledDate: time => {
                        if(this.searchDate.endTime) {
                            return time.getTime() > new Date(this.searchDate.endTime).getTime()
                        }
                    }
                },
                pickerOptionsEnd: {
                    disabledDate: time => {
                        if(this.searchDate.startTime) {
                            return time.getTime() < new Date(this.searchDate.startTime).getTime()
                        }
                    }
                },
}

3.watch写监听

watch:{
            'searchDate': {//解决elementui时间插件清空后值为null的问题
              handler(newName, oldName) {
                //newVal是指更新后的数据
                //oldName是指更新之前的数据
                newName.startTime == null ? this.searchDate.startTime = "" : this.searchDate.startTime = this.searchDate.startTime;
                newName.endTime == null ? this.searchDate.endTime = "" : this.searchDate.endTime = this.searchDate.endTime;
              },
              deep: true,
              immediate: true
            }
        },

4.选择开始时间之后，直接跳转到结束时间的选择，写方法实现

focusNext() {
                let nextPicker = document.getElementById('nextPicker');
                nextPicker.focus();
            },

5.限制时间，最大值是自己想指定的时间；

定义变量，绑定即可；
变量

pickerOptionsEnd: {
    disabledDate: time => {
      return time.getTime() >((new Date('2099-12-31')).valueOf()) ; /*2099-12-31及之前*/
    }
  }

绑定

:picker-options="$store.state.global.pickerOptionsEnd"