<template>
  <!-- 年月日时分秒 -->
  <!-- 点击接受时间的时候可以选一个日期，然后点击办结时间的时候也可以选一个日期，而且开始时间不能大于办结时间 -->
  <!-- 除了双选，还可以单选，就是可以选其中任何一个 -->
  <div class="ddd-layout" @click="grentLayout" ref="ddlayout">
    <el-date-picker
      class="date"
      v-model="value2"
      align="right"
      type="date"
      placeholder="请选择接收时间">
    </el-date-picker>
    <el-date-picker
      class="date"
      v-model="value2"
      align="right"
      type="date"
      placeholder="请选择结办时间">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value2: '',
      doms: []
    }
  },
  methods: {
    grentLayout () {
      let interval = setInterval(() => {
        let doms = document.querySelectorAll('.el-picker-panel.el-date-picker.el-popper')
        if (doms.length > 1) {
          Array.from(this.doms).forEach(dom => {
            dom.parentNode.removeChild(dom)
          })
          this.doms = []
        } else if (doms.length > 0) {
          let dom = doms[0]
          clearInterval(interval)
          this.$refs.ddlayout.appendChild(dom)
          this.doms.push(dom)
        }
      })
    }
  }
}
</script>

<style>
@import url('./style.css');
</style>
