Vue2-datepicker: How do I open picker v.3.6.2 with custom button?

[FahrutdinovOF]

Hi! I cant find any way to open date picker on button? And to hide input.

[mengxiong10]

use prop open.

    <date-picker
      v-model="value"
      :open="open"  ></date-picker>
    <button @click="toggle">toggle</button>

data() {
  return {
    open: false
  }
},
methods: {
   toggle () {
      this.open = !this.open
  }
}

[FahrutdinovOF]

Doesn't work with inline prop https://codepen.io/OlegF/pen/XWdPrjb

[mengxiong10]

You can use v-show when use inline.

[FahrutdinovOF]

If you use v-show, the calendar position floats left top :(

[mengxiong10]

You can use style={ opacity: open ? '1' :'0'}

[FahrutdinovOF]

Thank! You have a great vue kung fu.

[yannxaver]

Hi :) I just wanted to add that if you want to hide the input field, it is probably better to use visibility: hidden instead of opacity: 0. If you use opacity: 0 the mouse cursor will still change when you hover over the space where the input field would normally be. If you use visibility: hidden instead, it does not. Great date picker by the way, thank you!