首页 文章

定位Angular UI引导程序Datepicker

提问于
浏览 次
21

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

enter image description here

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

enter image description here

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

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

谢谢

angularjs datepicker angular-ui-bootstrap

5 回答

  • 3

    如果要实现通用解决方案，只需通过更改 datepicker-popup 的模板就无法实现 .

    你必须更改指令内的 updatePosition 函数，以便 scope.position.left 等于这样的东西：

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

    但是，你必须确保在看到popuEl宽度后“读取”popuEl宽度，否则你将得到零 . 此外，如果您转到另一种模式（月份或年份选择），虽然弹出宽度可能会改变，但位置不会更新 .

    我只想说这个特点不是一两行更改，而且可能最好在_2978647中打开一个请求 . 有人可能愿意进一步调查这个！

    回复于
  • 22

    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;
 }
    回复于
  • 5

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

    文档的快速摘要 .

    popup-placement（默认：自动左下角，配置：'placement'） - 在放置之前传入由空格分隔的'auto'将启用自动定位，例如：“auto bottom-left” . 弹出窗口将尝试定位它最适合最近的可滚动祖先的位置 . 接受：top - 弹出顶部，水平居中于input元素 . 左上角 - 弹出顶部，左边缘与输入元素左边缘对齐 . 右上角 - 弹出顶部，右边缘与输入元素右边缘对齐 . bottom - 底部弹出，水平居中于input元素 . 左下角 - 底部弹出，左边缘与输入元素左边缘对齐 . 右下角 - 弹出底部，右边缘与输入元素右边缘对齐 . left - 左侧弹出，垂直居中于input元素 . 左上角 - 左侧弹出，上边缘与输入元素上边缘对齐 . 左下角 - 左侧弹出，下边缘与输入元素底边对齐 . right - 右侧弹出，垂直居中于input元素 . 右上角 - 右上角弹出，上边缘与输入元素上边缘对齐 . 右下角 - 右侧弹出，底部边缘与输入元素底部边缘对齐 .

    在你的情况下，我认为 bottom-right 将起作用 .

    玩this plunker了解更多详情 .

    回复于
  • 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 */
}
    回复于
  • 6

    是的，我如上所述攻击了我的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;
    }
}
    回复于

相关问题