Positioning Angular UI bootstrap Datepicker

angularjs datepicker angular-ui-bootstrap
abottoni picture abottoni · Sep 10, 2013 · Viewed 27.8k times · Source

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

Answer

lincolnge picture lincolnge · Aug 11, 2014

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

Related questions

Angular bootstrap datepicker date format does not format ng-model value

I am using bootstrap date-picker in my angular application. However when I select a date from that date-picker underlying ng-model that I have bind gets updated I want that ng-model in one date format 'MM/dd/yyyy'. but it every …

Read More
Angular UI month picker

I am trying to use angular-ui-datepicker as a month picker. But not able to configure it, tried it all. Here is the PLUNKER. I tried to set the modes as <input type="text" class="form-control col-md-3" datepicker-popup="MMM-yyyy" min-mode="…

Read More
How to usemultiple Angular UI Bootstrap Datepicker in single form?

I have a form where there is a need for me to have 2 or more date fields for different things. I tried the Angular UI Bootstrap which works fine when I have only 1 date field in the form. But it …

Read More