Positioning Angular UI bootstrap Datepicker

Question

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)

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):

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

Answer 1

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;
 }

Answer 2

Now latest angular-ui 1.2.0 onwards versions have popup-placement option in uib-datepicker-popup settings.

A quick summary from the docs.

popup-placement (Default: auto bottom-left, Config: 'placement') - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:

top - popup on top, horizontally centered on input element.

top-left - popup on top, left edge aligned with input element left edge.

top-right - popup on top, right edge aligned with input element right edge.

bottom - popup on bottom, horizontally centered on input element.

bottom-left - popup on bottom, left edge aligned with input element left edge.

bottom-right - popup on bottom, right edge aligned with input element right edge.

left - popup on left, vertically centered on input element.

left-top - popup on left, top edge aligned with input element top edge.

left-bottom - popup on left, bottom edge aligned with input element bottom edge.

right - popup on right, vertically centered on input element.

right-top - popup on right, top edge aligned with input element top edge.

right-bottom - popup on right, bottom edge aligned with input element bottom edge.

In your case, I think bottom-right will work.

play with this plunker for more details.

Answer 3

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 */
}