Translation of this issue:

How does the El date picker component listen to keyboard events after entering a date

Encapsulate el-date-picker as a component,like this

<template>
  <div class="date-picker">
    <el-date-picker
      ref="elDatePicker"
      v-model="dateValue"
      @change="handleDateChange"
      v-bind="$attrs"
      v-on="$listeners">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'MyDatePicker',
  inheritAttrs: false,
  components: {
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: [Date, Array, String]
  },
  watch: {
    value (newValue, oldValue) {
      this.dateValue = newValue
    }
  },
  data () {
    return {
      dateValue: ''
    }
  },
  created () {
    this.dateValue = this.value
  },
  mounted () {
    const picker = this.$refs.elDatePicker
    if (picker && picker.$el) {
      picker.$el.onkeydown = (ev) => {
        const event = ev || window.event
        
        if (event.keyCode === 13) { // Enter key
          this.$emit('change', this.handleDateFormat(picker.$children[0].value))
          picker.hidePicker()
        }
      }
    }
  },
  methods: {
    handleDateChange (date) {
      this.$emit('change', date)
    },
    handleDateFormat (dateStr) {
      // ...
    }
  }
}
</script>

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.