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

回答

相關問題