定位Angular UI引导程序Datepicker

Question

我对angularjs ui datepicker有一个"小"问题.我需要以某种方式表明,如果带有datepicker附加的输入,应该显示输入左下角的弹出窗口(默认情况下)

或者如果我想从输入的右下角代替它.这是因为在我创建的页面中,我的输入非常接近页面的右侧,当我附加日期选择器时,会发生这种情况(日期选择器被剪切,现在出现水平滚动):

但问题是我需要两个位置的日期选择器(根据图像中的相关案例).

有人知道如何解决这个问题？我已经尝试left在datepicker弹出模板中更改内联属性,但它始终是固定值,我认为这不是真正的选择.

谢谢

Answer 1

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

丑陋的黑客:

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

魔术CSS:

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

Answer 2

现在最新的angular-ui 1.2.0版本popup-placement在uib-datepicker-popup设置中有选项.

文档的快速摘要.

popup-placement(默认:自动左下角,配置:'placement') - 在放置之前传入由空格分隔的'auto'将启用自动定位,例如:"auto bottom-left".弹出窗口将尝试定位它最适合最近的可滚动祖先的位置.接受:

top - 弹出顶部,水平居中于input元素.

左上角 - 弹出顶部,左边缘与输入元素左边缘对齐.

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

bottom - 底部弹出,水平居中于input元素.

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

右下角 - 弹出底部,右边缘与输入元素右边缘对齐.

left - 左侧弹出,垂直居中于input元素.

左上角 - 左侧弹出,上边缘与输入元素上边缘对齐.

左下角 - 左侧弹出,下边缘与输入元素底边对齐.

right - 右侧弹出,垂直居中于input元素.

右上角 - 右上角弹出,上边缘与输入元素上边缘对齐.

右下角 - 右侧弹出,底部边缘与输入元素底部边缘对齐.

在你的情况下,我认为bottom-right会奏效.

玩这个plunker了解更多细节.

Answer 3

这个CSS解决方案可能比更改/破解你的角度.js文件更简单:

将你的日期选择器包装在div中,然后覆盖datepicker的.dropdown-menu类的边距CSS:

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

然后,在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 */
}

Answer 4

如果你想实现一个通用的解决方案，这是仅仅通过改变datepicker-popup.

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

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

但同样，您必须确保在 popuEl 宽度可见后“读取”它，否则您将得到零。此外，如果您进入另一种模式（月份或年份选择），尽管弹出宽度可能会改变，但位置不会更新。

我只是想说，这个功能不是一两行的改变，可能最好在 https://github.com/angular-ui/bootstrap/issues?state=open 中打开一个请求。愿意进一步调查此事！