Angularjs 定位角度UI引导数据选择器

我对angularjs ui日期选择器有一个“小”问题。我需要以某种方式指出，如果一个带有日期选择器附件的输入应该从输入的左下角显示弹出窗口（默认）

或者如果我想从输入的右下角取而代之。这是因为在我正在创建的页面中，我的输入非常靠近页面的右侧，当我连接日期选择器时，会发生这种情况（日期选择器被剪切，现在会出现一个水平滚动）：

但问题是，我需要在两个位置都使用日期选择器（根据图像中的相关案例）

有人知道怎么解决这个问题吗？我曾尝试更改datepicker弹出模板中内联的

left

属性，但它始终是一个固定值，我认为这不是真正的选择

---

谢谢

如果你想实现一个通用的解决方案，这是不能通过改变

日期选择器弹出窗口的模板来实现的

您必须更改指令中的
updatePosition
函数，以便
scope.position.left
等于以下内容：

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

但是，您必须再次确保在popuEl宽度可见后“读取”它，否则您将得到零。此外，如果您转到其他模式（选择月份或年份），尽管弹出窗口的宽度可能会改变，但不会更新位置

我只想说，这个feaure并不是一行或两行的改变，也许最好是在有人愿意进一步调查的情况下打开一个请求
 是的，如上所述，我对angular-ui.0.7.0.tpls.js文件进行了黑客攻击，效果非常好：

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

函数updatePosition（）{
scope.position=appendToBody？$position.offset（元素）：$position.position（元素）；
scope.position.top=scope.position.top+element.prop（'offsetHeight'）；
var padding=20；//距离右侧的最小距离
变量宽度=popupEl.外径（真）；
var widthOver=$（'body'）.outerWidth（true）-（scope.position.left+width+padding）；
如果（宽度小于0）{
scope.position.left=scope.position.left+宽度；
}
}
此CSS解决方案可能比修改/破解angular.js文件更简单：

将日期选择器包装在div中，然后覆盖日期选择器的边距CSS。下拉菜单类：

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


丑陋的黑客：

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

现在，最新的angular ui 1.2.0及以上版本在uib datepicker弹出设置中具有
弹出位置
选项

文档中的快速摘要

弹出式放置（默认：自动左下角，配置：“放置”）-
传入“自动”，在放置前用空格分隔
启用自动定位，例如：“自动左下角”。弹出窗口将显示
尝试将其放置在最近的可滚动祖先中。
接受：

顶部-在顶部弹出，水平居中于输入元素

左上-在顶部弹出，左边缘与输入元素左边缘对齐

右上-顶部弹出，右边缘与输入元素右对齐
边缘

底部-在底部弹出，水平居中于输入
元素

左下-在底部弹出，左边缘与输入对齐
元素左边缘

右下-底部弹出，右边缘对齐
输入元素的右边缘

左侧-在左侧垂直弹出
以输入元素为中心

左上-在左侧弹出，顶部边缘对齐
具有输入元素上边缘

左下-在左下边缘弹出
与输入元素底部边缘对齐

右侧-右侧弹出，
垂直居中于输入元素

右上方-右上方弹出
边缘与输入元素顶部边缘对齐

右下角-打开弹出窗口
右，底边与输入元素底边对齐

在您的情况下，我认为右下角的
会起作用

玩游戏了解更多详情。
你好，贝科斯。谢谢你的回答。我已经打开了请求，看看是否有人愿意检查这个。到目前为止，我已经解决了我的问题，但有很多改变。我必须修改模板并从内联样式中删除left属性。我做的另一件事是将输入和日期选择器封装在一个Div中，使用CSS和相对定位，我为左对齐和右对齐以及使用它的任何地方创建了一个样式，我根据我需要的对齐方式设置CSS类。我希望引导程序的人员考虑这个请求，因为解决方法只是处理这个问题的一种奇怪的方式。谢谢你的帮助！是的，我如上所述黑了angular-ui.0.7.0.tpls.js文件，效果非常好：不建议编辑库中的源代码。当您更新到新版本时，它们可能会中断。对于您的解决方案，存储库工作得非常好。唯一需要更正的是popupEl。outerWidth（true）应该是$（popupEl）。outerWidth（true）Urk！！当你不得不破解一些被很多人使用的东西时，它就会有一种代码的味道。首先，每次更新基本代码时，您都必须重新破解它；其次，您是在帮助自己，而不是帮助别人。尝试接近代码的所有者，并要求他们改变它，以便其他人可以从外部影响它。你是否考虑使用CSS来增加利润？看起来你的CSS肯定有问题，可能是因为你使用的是固定的布局。例如，如果页面的绝对宽度为1000像素，日期选择器的宽度为300像素，并且其
left
属性的绝对值为800像素，则最右边的100像素将丢失。这通常是个坏主意
<div class="hackyhack">
  <input datepicker-popup="...">
</div>

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