21

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

在此处输入图像描述

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

在此处输入图像描述

但问题是我在两个位置都需要日期选择器（根据图像中相关的情况）。

有人知道如何解决这个问题吗？我尝试更改leftdatepicker 弹出模板中的内联属性，但它始终是一个固定值，我认为这不是真正的选择。

谢谢

4

5 回答 5

24

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;
 }
于 2014-08-11T02:00:37.477 回答
7

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

来自文档的快速总结。

popup-placement (默认: auto bottom-left, Config: 'placement') - 传入'auto'，在放置前用空格隔开将启用自动定位，例如：“auto bottom-left”。弹出窗口将尝试定位它适合最近的可滚动祖先的位置。接受：

top - 顶部弹出窗口，水平居中于输入元素。

top-left - 顶部弹出窗口，左边缘与输入元素左边缘对齐。

top-right - 顶部弹出窗口，右边缘与输入元素右边缘对齐。

bottom - 底部弹出窗口，水平居中于输入元素。

bottom-left - 底部弹出窗口，左边缘与输入元素左边缘对齐。

bottom-right - 底部弹出窗口，右边缘与输入元素右边缘对齐。

left - 左侧弹出窗口，垂直居中于输入元素。

left-top - 左侧弹出窗口，顶部边缘与输入元素顶部边缘对齐。

left-bottom - 左侧弹出窗口，底部边缘与输入元素底部边缘对齐。

right - 右侧弹出窗口，垂直居中于输入元素。

right-top - 右侧弹出窗口，顶部边缘与输入元素顶部边缘对齐。

right-bottom - 右侧弹出窗口，底部边缘与输入元素底部边缘对齐。

在你的情况下，我认为bottom-right会奏效。

与这个 plunker一起玩以获取更多详细信息。

于 2016-03-26T20:34:42.520 回答
5

这个 CSS 解决方案可能比修改/修改 Angular .js 文件更简单：

将您的日期选择器包装在一个 div 中，然后覆盖日期选择器的 .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 */
}
于 2014-08-07T22:39:11.963 回答
3

是的，如上所述，我破解了我的 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;
    }
}
于 2013-11-29T04:55:52.857 回答
2

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

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

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

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

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

于 2013-09-12T22:31:49.330 回答