Angular UI Bootstrap - Popup Datepicker

我想点击使用Angular UI Bootstrap库组件的按钮时弹出日期选择器。在Angular UI Boostrap网站上都有这两个示例，但我没有看到将它们组合的方法。我不喜欢将日期选择器div作为popup指令文本的属性值的想法。Angular UI Bootstrap - Popup Datepicker

我也试图在日期选择器div使用ng-show但我不能说对任何工作。

这是我现在的代码。

<div ng-controller="DatepickerCtrl" class="input-append"> 
     <input class="input-small ng-pristine ng-valid" 
       type="text" 
       ng-value="dt" /> 
     <button type="button" 
       class="btn" 
       popover-placement="right" 
       ng-click"showDatePicker=true"  // the show when clicked strategy 
       popover="On the Right!">   // Don't see a way to make this encapsulate a div 
        <i class="icon-calendar"></i> 
     </button> 
     <datepicker ng-model="dt" 
        ng-show="showDatePicker" 
        starting-day="1" 
        date-disabled="disabled(date, mode)" 
        min="minDate" max="'2015-06-22'"> 
     </datepicker> 
</div>

我不太喜欢ng-show策略。宁愿它是一个流行的东西，但我认为有办法做得更好，所以我也不介意。

来源

2013-07-01 Saad Farooq

尝试使用[Angular Strap]（http://mgcrea.github.io/angular-strap/#/datepicker）。 – Stewie

我已经看过它，并最终会使用它，如果没有解决方案。 –

更新 2015-08-16 - 从Angular UI Bootstrap 0.13.0开始，现在包含此功能！它与我在下面描述的非常相似。要使用此功能，请将popover-template="'mytemplate.html'"添加到要应用弹出窗口的元素。

我创建了new example以显示此功能的实际应用。

截至2013-07-02，还有一个open issue与角UI引导项目，让你把HTML标记语言酥料饼中。

如果/当此更改合并时，您可以将日期选择器放入模板中，然后通过将popover-template="mytemplate.html"添加到您声明为弹出的元素来引用此模板。

由于此功能的一个例子，你可以看到一个Plunker that I recently forked。

我会根据情况变化更新此答案。

编辑

如果你喜欢冒险的感觉，我使用的代码是基于Pull Request 369，这将导致this commit。

有，我知道，为什么提交尚未合并的原因有三：

有需要时，父母范围被破坏到被清理一个范围。 Pawel Kozlowski在提交的链接中提到了这一点。
打开，关闭并重新打开弹出窗口会导致在弹出窗口重新打开时绑定到范围断点。我在Issue 220（上述链接相同的问题）上发布了一个解决方法。
目前还没有任何测试。

我可能会尝试在本周末找些时间来解决这些问题，以便将其合并到项目中。

来源

2013-07-02 19:39:43

约翰 - 真的很有帮助。但是，你能解释你在ui-bootstrap.js中修补了什么吗？你有差异吗？我想将这个补丁应用到我的0.4.0版本的ui-bootstrap-tpls.js中。我已经应用了其他补丁，我不能仅仅使用你的mods。在我看来，它应该可以用独立的脚本文件来修补它，它只是增加了ui-bootstrap-tpls-0.4.0.js。如果你能鞭打起来，会非常酷。 :) – Cheeso

嗨！我已经更新了我的答案。我没有差异，但我可以看看我能做些什么来在周末合并代码。 –

感谢您的更新。这就是诀窍！期待能够得到有关此更改的更新，但现在，这对我很有用。 – Cheeso

Angular UI Bootstrap - Popup Datepicker

回答

相关问题