angular ui bootstrap datepicker is-open directive not working

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]; } ])

updated

here is the demo plunker i have tried to assigning $parent.opened as well still not working

Answer1:

The problems is you're not using the open($event) function that is provided in your controller to open the datepicker itself.

<strong>FORKED PLUNKER</strong>

<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.

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:angular ui bootstrap datepicker is-open directive not working