element-ui 通过按钮式触发日期选择器

<template>
  <div class="date-input">
    <el-input
      v-model="startdatestr"
      :placeholder="$t('task.taskstarttime')"
      type="text"
      clearable
      class="date-input-field"
      @input="validatedate"
    />
    <span class="line"></span>
    <el-input
      v-model="enddatestr"
      :placeholder="$t('task.taskfinishtime')"
      type="text"
      clearable
      class="date-input-field"
      @blur="validatedate"
    />
    <div class="icon-container" @click="toggledatepicker">
      <i class="el-icon-date" style="font-size: 24px;"></i>
    </div>
    <el-date-picker
      style="
        position: absolute;
        z-index: -100;
        top: 15px;
        left: -178px;
        transform: scale(0.1);
      "
      size="mini"
      v-model="selecteddaterange"
      :editable="false"
      type="datetimerange"
      @change="ondatechange"
      ref="timepick"
      value-format="yyyy-mm-dd hh:mm:ss"
    />
  </div>
</template>
<script>
export default {
  props: {
    // 父组件传过来的值  
    customtimepicker: {  
      type: array,  
      default: () => {
              return [new date(), new date()]
            }  
    },  
  },
  data() {
    return {
      selecteddaterange: [],
      startdatestr: "",
      enddatestr: "",
      error: ''
    };
  },
  created(){
    console.log('====> customtimepicker', this.customtimepicker);
  },
  watch: {
    customtimepicker: {
      handler(newval) {
        console.log('customtimepicker==>newval', newval);
        if (newval && newval.length === 2) {
          this.selecteddaterange = [...newval];
          this.startdatestr = newval[0];
          this.enddatestr = newval[1];
        }
      },
      deep: true
    },
    selecteddaterange: {
      handler(newval, oldval) {
        if (newval && newval.length === 2) {
          if(oldval && newval.tostring() === oldval.tostring()) {
            return;
          } else {
            this.startdatestr = newval[0].tostring().replace('t', ' ');
            this.enddatestr = newval[1].tostring().replace('t', ' ');
            this.$emit('input', newval);
          }
        }
      },
      deep: true
    },
    startdatestr(newval, oldval) {
      if(oldval && newval.tostring() === oldval.tostring()) {
        return;
      } else {
        this.selecteddaterange[0] = newval.tostring().replace('t', ' ');
        this.$emit('input', this.selecteddaterange);
      }
    },
    enddatestr(newval, oldval) {
      if(oldval && newval.tostring() === oldval.tostring()) {
        return;
      } else {
        this.selecteddaterange[1] = newval.tostring().replace('t', ' ');
        this.$emit('input', this.selecteddaterange);
      }
    }
  },
  methods: {
    validatedate() {
      const value = this.startdatestr;
      if (value.trim() === '') {
        this.error = '';
        this.$emit('updateerror', this.error);
        return;
      }
      // 验证格式
      const regex = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/;
      const match = value.match(regex);
      if (!match) {
        this.$message.error('invalid date format. please use yyyy-mm-dd hh:mm:ss.');
        //this.error = 'correct format is yyyy-mm-dd hh:mm:ss';
        // this.$emit('updateerror', this.error);
        return;
      }
      // 解析日期
      const [year, month, day, hours, minutes, seconds] = match.slice(1).map(number);
      // 检查年份是否在合理范围内
      if (year < 1900 || year > 2100) {
        this.$message.error('invalid year. please enter a year between 1900 and 2100.');
        // this.error = 'please input valid year';
        // this.$emit('updateerror', this.error);
        return;
      }
      // 检查月份是否在1到12之间
      if (month < 1 || month > 12) {
        this.$message.error('invalid month. please enter a month between 1 and 12.');
        // this.error = 'please input valid month';
        // this.$emit('updateerror', this.error);
        return;
      }
      // 检查日期是否在1到当月的最大天数之间
      const daysinmonth = new date(year, month, 0).getdate();
      if (day < 1 || day > daysinmonth) {
        this.$message.error('invalid day. please enter a day between 1 and the maximum number of days in the selected month.');
        // this.error = 'please input valid day';
        // this.$emit('updateerror', this.error);
        return;
      }
       // 检查小时是否在0到23之间
       if (hours < 0 || hours > 23) {
        this.$message.error('invalid hour. please enter an hour between 0 and 23.');
        // this.error = 'please input valid hour';
        // this.$emit('updateerror', this.error);
        return;
      }
      // 检查分钟是否在0到59之间
      if (minutes < 0 || minutes > 59) {
        this.$message.error('invalid minute. please enter a minute between 0 and 59.');
        // this.error = 'please input valid minute';
        // this.$emit('updateerror', this.error);
        return;
      }
      // 检查秒是否在0到59之间
      if (seconds < 0 || seconds > 59) {
        this.$message.error('invalid second. please enter a second between 0 and 59.');
        // this.error = 'please input valid second';
        // this.$emit('updateerror', this.error);
        return;
      }
      // 创建日期对象
      const date = new date(year, month - 1, day, hours, minutes, seconds);
      // 检查日期是否有效
      if (isnan(date.gettime())) {
        this.$message.error('invalid date. please enter a valid date.');
        // this.error = 'please input valid date';
        // this.$emit('updateerror', this.error);
        return;
      }
      this.error = '';
      this.$emit('updateerror', this.error);
    },
    toggledatepicker() {
      //触发日期框展开
      //  document
      //     	.queryselector(".time-date-picker")
      //     	.queryselector("input")
      //     	.focus();
      this.$refs.timepick.focus();
    },
    ondatechange(date) {
      this.startdatestr = date[0];
      this.enddatestr = date[1];
      this.$set(this, 'selecteddaterange', [this.startdatestr, this.enddatestr])
      this.$emit('input', this.selecteddaterange);
    },
  },
};
</script>
<style scoped>
.date-input {
  display: flex;
  align-items: center;
  position: relative; /* 为绝对定位的日期选择器提供相对定位 */
}
.date-input-field {
  width: 18%;
  /* flex-grow: 1; /* 让输入框占满剩余空间 */
  /* margin: 0; /* 删除外边距 */
  z-index: 10;
}
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /*width: 30px; /* 正方形框的宽度 */
  /*height: 30px; /* 正方形框的高度 */
  /*border: 1px solid #ccc; /* 正方形框的边框 */
  cursor: pointer;
  /*background-color: #f9f9f9; /* 可以选择性添加背景色 */
  background: transparent;
  color: #008ed0;
  /*border: 1px solid #008ed0;
}
.icon {
  font-size: 16px; /* 调整图标大小 */
  font-weight: bold; /* 粗体字 */
  margin: 0; /* 删除图标的外边距 */
}
/*
.timepickcss {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
}
*/
.line {
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: #005987;
}
</style>

<div class="app-container">
    <el-form
  ref="submitform"
  :model="submitform"
  class="form-item table"
  label-width="80px"
  label-position="left"
  :inline="true"
>
  <el-form-item label="开始日期" prop="startdate">
    <el-date-picker
      v-model="submitform.startdate"
      type="date"
      placeholder="请输入开始日期"
      value-format="yyyy-mm-dd"
      :picker-options="pickeroptionsstart"
    ></el-date-picker>
  </el-form-item>
  <el-form-item label="结束日期" prop="enddate">
    <el-date-picker
      v-model="submitform.enddate"
      type="date"
      placeholder="请输入开始日期"
      value-format="yyyy-mm-dd"
      :picker-options="pickeroptionsend"
    ></el-date-picker>
  </el-form-item>
   <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handlequery">搜索</el-button>
        <el-button icon="el-icon-refresh"  size="mini" @click="resetquery">重置</el-button>
  </el-form-item>
</el-form>
  </div>
 <script>
export default {
  name: 'statisticscountycrops',
data() {
    return {
      loading: true,
       // 开始结束日期限制
      pickeroptionsstart: {
        disableddate: time => {
          if (this.submitform.enddate) {
            return (
              time.gettime() >= new date(this.submitform.enddate).gettime()
            );
          }
        }
      },
      // 结束日期限制
      pickeroptionsend: {
        disableddate: time => {
          if (this.submitform.startdate) {
            return (
              time.gettime() <= new date(this.submitform.startdate).gettime()
            );
          }
        }
      },
      submitform: {
        startdate: '',
        endtdate: ''
      },
    };
  },
 methods: {
/* get请求 对象参数*/
    getlist(){
      statisticscountycrops(this.submitform).then(res =>{
          this.datalist = res.data;
          this.loading = false;
      }).catch(err =>{
       console.error(err)
        this.loading = false;
      })
    },
  /** 搜索按钮操作 */
    handlequery() {
      this.getlist();
    },
   /** 重置按钮操作 */
    resetquery() {
      this.daterangecreatetime = [];
      this.resetform("submitform");
    },  
  },
};
</scrpit>

<el-form-item label="查询范围">
        <el-date-picker
          v-model="daterangecreatetime"
          style="width: 240px"
          value-format="yyyy-mm-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
     <script>
     export default {
      data() {
    return {
    daterangecreatetime: [],
      queryparams:{},
      }
      },
        this.queryparams = {};
      if (null != this.daterangecreatetime && '' != this.daterangecreatetime) {
        this.queryparams["startdate"] = this.daterangecreatetime[0];
        this.queryparams["enddate"] = this.daterangecreatetime[1];
      }
      }
       <script>