Search code examples
javascriptvue.jsdatepickerelementelement-ui

Element - DatePicker without input

I'm trying to display the Element Datepicker component directly in my Vue page, without having to display and click on the input element for it to popup. I read their source code on Github, there is no prop for this, and I don't want to modify it on my project in node_modules as I know it's bad practice.

I tried to append the div created by the click event directly into my vue but it's not working and I can't manage to track and retrieve my input data to my Vuejs state.

Here is a screenshot of the div created by the Datepicker input click event :

enter image description here

If anyone has any idea on how to achieve this, that would be awesome.

Solution

  • You could use ref to call a function on the picker component

    <el-date-picker
      ref="test"
      v-model="value1"
      type="date"
      placeholder="Pick a day">
</el-date-picker>

    JS

    mounted() {
  this.$refs.test.showPicker()
},

    Also added a example on codepen: https://codepen.io/reijnemans/pen/ExmvGLa