Angular UI Bootstrap - Popup Datepicker

Question

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.

I have looked at it and will eventually use it if there is no solution for this. — Saad Farooq
– Saad Farooq, Commented Jul 2, 2013 at 1:04

John Oberreuter · Accepted Answer · 2015-08-17 04:53:55Z

13

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:

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

edited Aug 17, 2015 at 4:53

answered Jul 2, 2013 at 19:39

John Oberreuter

2713 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cheeso Over a year ago

John - really helpful. But can you explain what you patched in ui-bootstrap.js? Do you have diffs? I'd like to apply that patch to my 0.4.0 version of the ui-bootstrap-tpls.js. I have other patches already applied and I cannot just use your mods alone. Seems to me it should be possible to monkey-patch it with a standalone script file, which simply adds to ui-bootstrap-tpls-0.4.0.js. Would be really cool if you could whip that up. :)

John Oberreuter Over a year ago

Hi! I've updated my answer. I don't have a diff for it, but I might look into seeing what I can do to get the code merged in over the weekend.

Cheeso Over a year ago

thanks for the update. That did the trick! Will look forward to getting an update with this change but for now, this works for me.

Collectives™ on Stack Overflow

Angular UI Bootstrap - Popup Datepicker

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related