The Angular UI Bootstrap Datepicker is fan-dabby-dozy. But it has a ... pecularity. You can use the picker like this:
The above code produces a textbox which, when clicked upon, renders the datepicker popup (which vanishes upon date selection). This works because the
ng-click directive calls the
valuationDatePickerOpen function on the controller which sets the
valuationDatePickerIsOpen property to be
true and that property happens to be bound to the
is-open attribute. Your knee bone connected to your thigh bone, Your thigh bone connected to your hip bone... This makes sense. This works. Great.
But I want something a little prettier - I want to use the lovely calendar glyph to trigger the datepicker popup like in the docs. That should be really easy right? I just tweak the HTML to add a calendar button and the associated
Miraculously, this doesn't work. Which is strange - I mean it ought to... The same
ng-click directive is sat on our new calendar button as is in place on the datepicker itself. So what's happening? Well let's do some investigation. If you take a look at the docs you'll see that their example with the calendar glyph is subtly different to our own. Namely, when the opener function is invoked, the official docs pass along
$event. To what end? Well, the docs opener function does something that our own does not. This:
Ignore all the
$scope malarkey - I want you to pay attention to what is happening with
stopPropogation are being called. This is probably relevant.
I decided to do a little experimentation. I created a Plunk which demonstrates the datepicker and uses
$watch to track what happens to
valuationDatePickerIsOpen. The Plunk featured 2 calendar glyphs - the left one doesn't pass along
valuationDatePickerOpen when it is clicked and the right one does. When
$event is passed we call
After a little experimentation of my own I discovered that calling
$event.stopPropogation() is the magic bullet. Without that in place
valuationDatePickerIsOpen gets set to
true and then immediately back to
false again. I do not know why. There may be an entirely sane reason for this - if so then please do post a comment and let me know. It wouldn't hurt for the Angular UI Bootstrap Datepicker docs to mention this. Perhaps it's time to submit a PR....