I am facing an issue with the angular bootstrap datepicker popup. Even though I click on the icon to open the datepicker popup and it appends HTML to the element, the popup itself does not appear.
I have thoroughly checked everything but I seem to be stuck here without any clue about what to do next. Can anyone offer some assistance?
The version of angular bootstrap I am using is: Version: 0.12.1 - 2015-02-20
Below is the code snippet that I have employed:
<div class="input-group w-md">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-click="open($event)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
Take a look at the console for more information: https://i.sstatic.net/ZmtEu.png
Javascript controllers:
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
// Disable weekend selection
$scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = !$scope.opened;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.format = 'dd.MM.yyyy';