element-ui date-picker选择器默认选择当天的时间段

示例

示例代码:

        <el-date-picker
          ref="picker_date"
          prefix-icon="el-icon-date"
          :clearable="false"
          v-model="timeSelect"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="datePickerOptions"
          :default-time="defaultSelectTime"
        >
        </el-date-picker>

        created(){
          //此处为初始化默认选择代码，可能有些不需要
         //parseTime为自己封装的时间转换函数，未贴上去
          let start = new Date(new Date().setHours(0, 0, 0, 0));
          let end = new Date();
          this.defaultSelectTime = [
            parseTime(start, "hh:ii:ss"),
            parseTime(end, "hh:ii:ss")
          ];

        }

        data(){
          const _this = this
          return {
            timeSelect: [ ],
            datePickerOptions: {
              startDate: null,
              disabledDate: time => {
                if (
                  this.datePickerOptions.startDate === undefined ||
                  this.datePickerOptions.startDate === null
                ) {
                  return time.getTime() > new Date().getTime();
                } else {
                  return (
                    time.getTime() >
                      this.datePickerOptions.startDate.getTime() + 86399000 ||
                    time.getTime() < this.datePickerOptions.startDate.getTime()
                  );
                }
              },
              onPick: function(dateRange) {
                //方法1: 副作用是输入框会闪灰一下
                const min = new Date(dateRange.minDate)
                const max = new Date(parseTime(dateRange.minDate,'yyyy-mm-dd') + ' ' + _this.defaultSelectTime[1])
                setTimeout(() => {
                  _this.$refs.picker_date.picker.handleChangeRange({
                    minDate:min,
                    maxDate:max, //设置为默认时间
                    rangeState: {
                      endDate:min,
                      selecting:false
                    }
                  })
                }, 30);
                return
                //方法2: 副作用是控制台会报错,但是程序能正常执行
                _this.$refs.picker_date.picker.handleChangeRange({
                    minDate:min,
                    maxDate:max, //设置为默认时间
                    rangeState: {
                      endDate:min,
                      selecting:false
                    }
                })
                this.$nextTick(()=>{
                  _this.$refs.picker_date.picker.handleTimeChange(min ,'min')
                  _this.$refs.picker_date.picker.handleTimeChange(max ,'max')
                })
                return

                //通过禁用让用户只能够重复点选2次来选择时间段
                _this.datePickerOptions.startDate = dateRange.minDate;
                if (dateRange.maxDate) {
                  _this.datePickerOptions.startDate = null;
                }
              }
            }
          }
        }