Open TolotraRam opened 6 years ago
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.
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>
Same issue here... Any workaround?
Same issue as well
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.
👍 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.
Im using vuesax that can't get along with bootstrap-vue.. any solution here?
In Vue3 this can now easily be solved with the Teleport feature: https://vuejs.org/guide/built-ins/teleport.html
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.