<!DOCTYPE html>
<html ng-app="peskyDatepicker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="DatepickerDemoCtrl as vm">
<pre>Selected date is: <em>{{vm.valuationDate | date:'fullDate' }}</em>
</pre>
<div class="row">
<div class="col-md-3">
<p class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.valuationDatePickerOpen()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<input type="text" class="form-control"
datepicker-popup="mediumDate"
is-open="vm.valuationDatePickerIsOpen"
ng-click="vm.valuationDatePickerOpen()"
ng-model="vm.valuationDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.valuationDatePickerOpen($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
<p class="col-md-3">
The left button <em>doesn't</em> work (opens the picker and closes right away).<br />
The right button <em>does</em> work (opens the picker and stays open).<br />
And it's all down to <code>$event.stopPropagation();</code> - funny huh?</code>
</p>
<ul>
<li ng-repeat="open in vm.opens">{{open}}</li>
</ul>
</div>
</body>
</html>
angular.module('peskyDatepicker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function ($scope) {
var vm = this;
vm.valuationDate = new Date();
vm.valuationDatePickerIsOpen = false;
vm.opens = [];
$scope.$watch(function () {
return vm.valuationDatePickerIsOpen;
},function(value){
vm.opens.push("valuationDatePickerIsOpen: " + value + " at: " + new Date());
});
vm.valuationDatePickerOpen = function ($event) {
if ($event) {
$event.preventDefault();
$event.stopPropagation(); // This is the magic
}
this.valuationDatePickerIsOpen = true;
};
}]);
/* Styles go here */