i'm trying to use angularjs ui bootstrap datepicker on my project but same code i grabbed from example doesn't seems to be working properly when i dig in to code i have realized the problem is with is-open attribute.sample code i tried to run on my project was.
<section class="panel panel-default">
<div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Datepicker</strong></div>
<div class="panel-body" data-ng-controller="DatepickerDemoCtrl">
<div class="row">
<div class="col-sm-4">
<div class="input-group ui-datepicker">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="dt"
is-open="opened"
min="minDate"
max="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close">
</div>
<div class="callout callout-info">
<p>Date is: {{dt | date:'fullDate'}}</p>
</div>
</div>
<div class="col-sm-8">
<p>
Format:
<span class="ui-select">
<select ng-model="format"
ng-options="f for f in formats"></select>
</span>
</p>
<button class="btn btn-sm btn-info" ng-click="today()">Today</button>
<div class="space"></div>
<button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<div class="space"></div>
<button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
<div class="space"></div>
<button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<div class="space"></div>
<button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
</div>
</div>
</section>
.controller('DatepickerDemoCtrl', [
'$scope', function($scope) {
$scope.today = function() {
return $scope.dt = new Date();
};
$scope.today();
$scope.showWeeks = true;
$scope.toggleWeeks = function() {
return $scope.showWeeks = !$scope.showWeeks;
};
$scope.clear = function() {
return $scope.dt = null;
};
$scope.disabled = function(date, mode) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
};
$scope.toggleMin = function() {
var _ref;
return $scope.minDate = (_ref = $scope.minDate) != null ? _ref : {
"null": new Date()
};
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
return $scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
return $scope.format = $scope.formats[0];
}
])
here is the demo plunker i have tried to assigning $parent.opened
as well still not working
The problems is you're not using the open($event) function that is provided in your controller to open the datepicker itself.
<input type="text" class="form-control" datepicker-popup="{{format}}"
ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close"
ng-click="open($event)" />
Notice the ng-click
event I added in the datepicker input, when you click the input element, it will open the datepicker. Likewise for the font-awesome calendar button on the right side of the input element, I have added an ng-click
as well to open the calendar when it is clicked:
<span class="input-group-addon" ng-click="open($event)">
<i class="fa fa-calendar"></i>
</span>
Furthermore, you were adding the bootstrap.js
script in the plunker. Since you're already UI-Bootstrap
, then it would be redundant to use bootstrap.js
which depends on JQuery
.