- 首页
- 其他开发
- angular ui bootstrap datepicker is-open 指令不起作用
angular ui bootstrap datepicker is-open 指令不起作用
[英] angular ui bootstrap datepicker is-open directive not working
本文介绍了angular ui bootstrap datepicker is-open 指令不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在我的项目中使用 angularjs ui bootstrap datepicker，但是当我深入研究代码时，我从示例中获取的相同代码似乎无法正常工作我已经意识到问题出在 is-open 属性.sample我试图在我的项目上运行的代码是.
<div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span>日期选择器</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><输入类型="文本"类=形式控制"datepicker-popup="{{format}}"ng-model="dt"是-打开=打开"分钟=分钟日期"max="'2015-06-22'"datepicker-options="dateOptions"日期禁用=禁用(日期，模式)"ng-required="true"关闭文本=关闭">
<div class="callout callout-info"><p>日期是:{{dt |日期:'fullDate'}}</p>
<div class="col-sm-8"><p>格式:<span class="ui-select"><选择 ng-model="格式"ng-options="f for f in format"></select></span></p><button class="btn btn-sm btn-info" ng-click="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()">清除</button><div class="space"></div><button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="今天限制之后">最小日期</button>
</节>.controller('DatepickerDemoCtrl', ['$scope', 函数($scope){$scope.today = function() {返回 $scope.dt = new Date();};$scope.today();$scope.showWeeks = true;$scope.toggleWeeks = function() {返回 $scope.showWeeks = !$scope.showWeeks;};$scope.clear = function() {返回 $scope.dt = null;};$scope.disabled = 函数(日期，模式){返回模式 === '天' &&(date.getDay() === 0 || date.getDay() === 6);};$scope.toggleMin = function() {var_ref;返回 $scope.minDate = (_ref = $scope.minDate) != null ?_参考:{空":新日期()};};$scope.toggleMin();$scope.open = function($event) {$event.preventDefault();$event.stopPropagation();返回 $scope.opened = true;};$scope.dateOptions = {'年份格式': "'yy'",起始日":1};$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];返回 $scope.format = $scope.formats[0];}])
更新
这是我尝试分配 $parent 的演示 plunker.也打开了 还是不行
解决方案
问题是您没有使用控制器中提供的 open($event) 函数来打开日期选择器本身.
分叉的 PLUNKER
<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="关闭"ng-click="open($event)"/>
注意我在日期选择器输入中添加的ng-click事件，当你点击输入元素时，它会打开日期选择器.同样，对于 input 元素右侧的字体很棒的日历按钮，我还添加了一个 ng-click 以在单击时打开日历:
<i class="fa fa-calendar"></i></span>
此外，您在 plunker 中添加了 bootstrap.js 脚本.由于您已经UI-Bootstrap，那么使用依赖于JQuery 的bootstrap.js 将是多余的.
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
解决方案
The problems is you're not using the open($event) function that is provided in your controller to open the datepicker itself.
FORKED PLUNKER
<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.
这篇关于angular ui bootstrap datepicker is-open 指令不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
