I too faced the same issue while using bootstrap datepicker in my project. I used an alternate method where in i created a hidden transparent layer inside the datepicker template inside bootstrap-datepicker.js (with classname 'hidden-layer-datepicker') and gave fixed position and occupying full height and width of the html.
DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">
Now when the datepicker modal pops up, the newly created layer will occupy the entire page width and height and when the user scrolls since the modal is appended to body, the datepicker modal too scrolls with it. With the introduction of the new layer, the inner scroll of the container in which the datepicker input field is present, will be negated while the modal is open.
One more thing to do is to update the datepicker modal closing event when clicking on the hidden layer and that is done using the below code inside bootstrap-datepicker.js.
// Clicked outside the datepicker, hide it
if (!(
this.element.is(e.target) ||
(this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") ||
this.picker.is(e.target) ||
this.picker.find(e.target).length
)){
this.hide();
}