element ui日期组件设置默认时间

对日期进行了预处理（将起始的默认时间设置为当前时间，结束时间的默认时间设置为往一个月后），即使是点击了时间也不会报错
运行图效果

vue文件

<template>
  <div>
    <label>本月月初时间</label>
    <el-date-picker
      v-model="startTime"
      type="datetime"
      :editable="false"
      format="yyyy-MM-dd HH:mm:ss"
      style="width: 200px"
      value-format="yyyy-MM-dd HH:mm:ss"
    ></el-date-picker>
    <label>当前时间</label>
    <!-- 如果我们给其中的一个日期设置了默认值，那么就尽量不要再去给他使用value-format了，不然就会报错，因为他是string类型，我们可以在发起请求的时候将数据转化为后端想要的数据传过去，例子如下 -->
    <el-date-picker
      v-model="endTime"
      type="datetime"
      :editable="false"
      format="yyyy-MM-dd HH:mm:ss"
      style="width: 200px"
      value-format="yyyy-MM-dd HH:mm:ss"
    ></el-date-picker>
    <!-- 获取当前时间的一个月后的时间值 -->
    <label>一个月后时间</label>
    <el-date-picker
      v-model="nextTime"
      type="datetime"
      :editable="false"
      format="yyyy-MM-dd HH:mm:ss"
      style="width: 200px"
      value-format="yyyy-MM-dd HH:mm:ss"
    ></el-date-picker>
    <el-button @click="find">查询</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      nextTime: "",
    }
  },
  methods: {
    getStartTime() {
      // 获取其当前月的第一天
      var data = new Date()
      var Da = new Date(data.getTime())
      var y = Da.getFullYear()
      var m = Da.getMonth() + 1
      m = m < 10 ? "0" + m : m
      return y + "-" + m + "-" + "01" + " " + "00" + ":" + "00" + ":" + "00"
    },
    getEndTime() {
      var data = new Date()
      var Da = new Date(data.getTime())
      var y = Da.getFullYear()
      var m = Da.getMonth() + 1
      var d = Da.getDate()
      var H = Da.getHours()
      var mm = Da.getMinutes()
      var ss = Da.getSeconds()
      m = m < 10 ? "0" + m : m
      d = d < 10 ? "0" + d : d
      H = H < 10 ? "0" + H : H
      return y + "-" + m + "-" + d + " " + H + ":" + mm + ":" + ss
    },
    getnextTime() {
      var data = new Date()
      var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30)
      var y = Da.getFullYear()
      var m = Da.getMonth() + 1
      var d = Da.getDate()
      var H = Da.getHours()
      var mm = Da.getMinutes()
      var ss = Da.getSeconds()
      m = m < 10 ? "0" + m : m
      d = d < 10 ? "0" + d : d
      H = H < 10 ? "0" + H : H
      return y + "-" + m + "-" + d + " " + H + ":" + mm + ":" + ss
    },
    find() {
      console.log(this.startTime, this.endTime, this.nextTime)
    },
  },
  mounted() {
    var vm = this
    vm.startTime = vm.getStartTime()
    vm.endTime = vm.getEndTime()
    vm.nextTime = vm.getnextTime()
  },
}
</script>