CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Saad Farooq
Saad Farooq

Reputation: 13402

Angular UI Bootstrap - Popup Datepicker

I would like to have a datepicker popup upon clicking a button using the Angular UI Bootstrap library's components. There are examples of both on the Angular UI Boostrap website but I don't see a way to combine them. I don't like the idea of placing the Datepicker div as an attribute value for the popup directive's text.

I also tried to use ng-show on the Datepicker div but I can't that to work either.

Here's the code I have at the moment.

<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>

I don't really like the ng-show strategy. Would rather have it be a popover but I assume there are ways to do that better too so I wouldn't mind either.

Upvotes: 11

Views: 22194

Answers (1)

John Oberreuter
John Oberreuter

Reputation: 271

Update 2015-08-16 - As of Angular UI Bootstrap 0.13.0 this functionality is now included! It works very similar to what I've described below. To use this feature add popover-template="'mytemplate.html'" to the element you want to apply the popover to.

I've created new example showing this feature in action.

As of 2013-07-02, there is an open issue with the Angular UI Bootstrap project to allow you to put HTML markup inside a popover.

If/when this change is merged, you'll be able to put a datepicker inside a template and then reference this template by adding popover-template="mytemplate.html" to the element that you've declared the popover on.

As an example of this functionality, you can see a Plunker that I recently forked.

I will update this answer as the situation changes.

EDIT

If you're feeling adventurous, the code I used is based on Pull Request 369, which will leads to this commit.

There are three reasons that I am aware of as to why the commit hasn't been merged yet:

  1. There's a scope that needs to be cleaned up on when a parent scope is destroyed. This is mentioned in a comment made by Pawel Kozlowski in the commit I linked.
  2. Opening, closing and reopening the popover causes the binding to the scope break when the popover reopens. I posted a workaround to this in Issue 220 (same issue linked above).
  3. There are't any tests around this yet.

I may try to find some time this weekend to work on these issues so it can be merged into the project.

Upvotes: 13

Related Questions