Appending to body

[TolotraRam]

Can we have this feature like append the datepicker to the body so inside a wrapper with overflow hidden it doesn't "cut" the datepicker.

[tibineagu]

I'd like to upvote this as it's the only thing keeping us from using vuejs-datepicker in our environment. This feature would be an amazing improvement to an already amazing library.

[terenceng2010]

This is how I do it with bootstrap-vue popover(which makes use of Popper.js) , the boundary="window" is the key for it to not "cut" the datepicker:

<label class="p-0 m-0 px-1" for="your-date-input">Your Date</label>
<input readonly type="text" class="form-control form-control-sm p-0 m-0 px-1" id="your-date-input"
placeholder="" :value='YOUR_DATE_FIELD'
>
<b-popover
    placement="auto"
    target="work-date-input"
    triggers="focus"
    boundary="window"
>
    <datepicker :inline="true"
                placeholder='Your Date'
                input-class=''
                @selected="handleNewDateInput"
                :value='YOUR_DATE_FIELD'
                :clear-button='true'></datepicker>

</b-popover> 

[gpressutto5]

Same issue here... Any workaround?

[tbrown10a]

Same issue as well

[terenceng2010]

As said, probably you may rely on popper.js to assist to append to body. Just create a wrapper vue component and put the datepicker component inside it.

[juuxstar]

👍 The popover workaround has the drawback that it ends up re-implementing the work of the input control. Also, in the workaround, the <input type="text"... is read-only but the datepicker comes with it's own input control along with text parsing which is valuable.

[do-yeon]

Im using vuesax that can't get along with bootstrap-vue.. any solution here?

[uke5tar]

In Vue3 this can now easily be solved with the Teleport feature: https://vuejs.org/guide/built-ins/teleport.html