11

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.

Saad Farooq
  • 13,172
  • 10
  • 68
  • 94

1 Answers1

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:

  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.

John Oberreuter
  • 271
  • 3
  • 6
  • 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. :) – Cheeso Jul 03 '13 at 01:27
  • 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. – John Oberreuter Jul 03 '13 at 03:31
  • 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. – Cheeso Jul 03 '13 at 15:11