定位 Angular UI 引导程序 Datepicker

Posted 2023-05-07

【中文标题】定位 Angular UI 引导程序 Datepicker

【英文标题】：Positioning Angular UI bootstrap Datepicker

【发布时间】：2013-09-14 01:03:38

【问题描述】：

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

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

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

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

谢谢

【问题讨论】：

您是否考虑过使用 CSS 添加边距？你的 CSS 看起来肯定有问题，可能是因为你使用的是固定布局。例如，如果您的页面的绝对宽度为 1,000 像素，而您的日期选择器的宽度为 300 像素，并且其left 属性的绝对宽度为 800 像素，那么您将失去最右边的 100 像素。在 CSS 中使用固定布局通常是个坏主意（如果用户重新调整浏览器大小、更改屏幕恢复、使用屏幕较小的移动设备等会怎样？）。这在我看来像是 CSS 问题，不是 和 Angular 问题。

我已经通过向日期选择器的父标签添加一个类来解决这个问题，方法是在 CSS 中使用负边距。

【参考方案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;
 

【讨论】：

一点也不丑。

在开玩笑吗？这太棒了！哈哈。拯救了我的一天

【参考方案2】：

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

来自文档的快速摘要。

popup-placement（默认：自动左下角，配置：'placement'）- 在展示位置之前传入由空格分隔的“auto” 启用自动定位，例如：“自动左下角”。弹出窗口将 尝试定位它适合最近的可滚动祖先的位置。 接受：

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

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

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

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

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

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

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

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

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

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

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

右下 - 弹出 右，底边与输入元素底边对齐。

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

与this plunker 一起玩以了解更多详情。

【参考方案3】：

此 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 */

【讨论】：

完美解决方案！很简单。我将属性 datepicker-postion-right 添加到 datepicker。然后css变成：input[datepicker-position-right] + ul margin: 2px -Xpx;。不需要额外的 div。

与其他解决方案相比很好。

【参考方案4】：

是的，我如上所述破解了我的 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;
    

【讨论】：

感谢您的解决方案，效果很好。只有一件事需要纠正的是 popupEl.outerWidth(true) 应该是 $(popupEl).outerWidth(true)

呃！！当您必须破解许多人使用的东西时，就会产生代码气味。首先，每次更新基本代码时，您都必须重新破解它，其次，您是在帮助自己，而不是帮助他人。尝试接近代码的所有者并要求他们更改代码，以便其他人可以从外部影响它。

【参考方案5】：

如果你想实现一个通用的解决方案，这是仅仅通过改变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打开一个请求，可能有人愿意进一步调查！

【讨论】：

嗨贝科斯。感谢您的回答。我已经打开了请求，看看是否有人愿意检查一下。到目前为止，我已经解决了我的问题，但有很多变化。我不得不更改模板并从内联样式中删除 left 属性。我做的另一件事是将输入和日期选择器封装在一个 Div 中，并使用 CSS 和相对定位我为左右对齐创建了一个样式，在我使用它的任何地方，我都根据我需要的对齐方式设置 CSS 类。

我希望引导程序的人考虑这个请求，因为解决方法只是处理这个问题的一种奇怪方法。感谢您的帮助！

是的，如上所述，我破解了我的 angular-ui.0.7.0.tpls.js 文件，效果很好：

不建议从您的库中编辑源代码。当您更新到较新版本时，它们可能会中断