Positioning Angular UI bootstrap Datepicker

I am having a "small" issue with the angularjs ui datepicker. I need to indicate somehow, if an input with a datepicker attach, should show the popup from the bottom-left corner of the input (as default)

enter image description here

or if I want it from the bottom-right corner of the input instead. This is because in a page that I am creating, my input is really close to the right side of the page, and when I attach the datepicker, this happens (the datepicker is cutted and now a horizontal scroll appears):

enter image description here

but the thing is that I need the datepicker in both positions (according to the case related in the images).

Someone know how can this be fixed? I have tried changing the left attribute that is inline in the datepicker popup template, but it is always a fixed value and I believed that is not the real option.

Thanks

https://github.com/angular-ui/bootstrap/issues/1012

Ugly hack:

<div class="hackyhack">
  <input datepicker-popup="...">
</div>

Magic CSS:

.hackyhack {
  position: relative;
}
.hackyhack .dropdown-menu {
   left: auto !important;
   right: 0px;
 }

Yeah I hacked my angular-ui.0.7.0.tpls.js file as described above and it worked pretty good:

function updatePosition() {
    scope.position = appendToBody ? $position.offset(element) : $position.position(element);
    scope.position.top = scope.position.top + element.prop('offsetHeight');

    var padding = 20; //min distance away from right side
    var width = popupEl.outerWidth(true);
    var widthOver =  $('body').outerWidth(true) - (scope.position.left + width + padding);

    if(widthOver < 0) {
        scope.position.left = scope.position.left + widthOver;
    }
}

If you want to implement a general solution, this is something that cannot be achieved just by altering the template of the datepicker-popup.

You have to change the updatePosition function inside the directive, so that scope.position.left equals to something like this:

 scope.position.left += scope.position.width - $position.position(popupEl).width;

But again you have to be sure that you "read" the popuEl width after it is visible, otherwise you will get zero. Also, if you go to another mode (month or year selection) the position does not get updated although the popup width may change.

I just want to say that this feaure is not a one or two lines change, and probably it's better to open a request for this in https://github.com/angular-ui/bootstrap/issues?state=open Someone may be willing to investigate this further!

This CSS solution may be simpler than altering/hacking your angular .js files:

Wrap your datepicker in a div and then override the margin CSS of the datepicker's .dropdown-menu class: 

<div id="adjust-left">
   <your-datepicker-here/>
<div>

Then, in the CSS:

#adjust-left .dropdown-menu{
    /* Original value: margin: 2px 0 0; */
    margin: 2px -Xpx; /* Where X is the amount of pixles to shift it left */
}