twitter-bootstrap 带有角度指令的可点击引导日期选择器图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18012125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
clickable bootstrap-datepicker icon with angular directive
提问by michal
I'm using angularjs and I want my bootstrap-datepicker to be shown after clicking in calendar icon.
Now it's like this:
我正在使用 angularjs，我希望在单击日历图标后显示我的引导程序日期选择器。
现在是这样的：
<div class="input-append date datepicker">
<input type="text" b-datepicker ng-model="date"/>
<span class="add-on" ><i class="icon-calendar"></i></span>
</div>
Where b-datepickeris custom directive. Click in text field shows datepicker, but icon click doesn't work.
Here's sources: http://jsfiddle.net/cPVDn/
b-datepicker自定义指令在哪里。单击文本字段显示日期选择器，但单击图标不起作用。
这里的来源：http: //jsfiddle.net/cPVDn/
My goal is to be like this:
http://jsfiddle.net/6QnMB/
我的目标是像这样：http:
//jsfiddle.net/6QnMB/
I appreciate any help
我感谢任何帮助
UPDATE:
Here's solution:
http://jsfiddle.net/cPVDn/53/
更新：
这是解决方案：http:
//jsfiddle.net/cPVDn/53/
采纳答案by michal
I'm posting solution as separate answer.
我将解决方案作为单独的答案发布。
To make icon click work instead of:
要使图标单击工作而不是：
directive('bDatepicker', function () {
return {
restrict: 'A',
link: function (scope, el, attr) {
el.datepicker();
}
};
})
one could use something like:
可以使用类似的东西：
directive('bDatepicker', function () {
return {
restrict: 'A',
link: function (scope, el, attr) {
el.datepicker({});
var component = el.siblings('[data-toggle="datepicker"]');
if (component.length) {
component.on('click', function () {
el.trigger('focus');
});
}
}
};
})
Here is full snippet with solution: http://jsfiddle.net/cPVDn/53/
这是带有解决方案的完整片段：http: //jsfiddle.net/cPVDn/53/
回答by Maxim Shoustin
See good plugin from AngularStrap that will solve your problem: link.
从 AngularStrap 中查看可以解决您的问题的好插件：链接。
JS
JS
.config(function($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd/MM/yyyy',
startWeek: 1
});
})
HTML
HTML
<input type="text"
class="form-control"
ng-model="selectedDateAsNumber"
data-date-format="yyyy-MM-dd"
data-date-type="number"
data-min-date="02/10/86"
data-max-date="today"
data-autoclose="1"
name="date2"
bs-datepicker>
See Demo Plunker
看演示 Plunker
And this is their main page
这是他们的主页
回答by dxvargas
In the example in bootstrap documentationthey do it somewhat like this:
在引导程序文档中的示例中，他们这样做有点像这样：
<div class="input-append date datepicker">
<input type="text" is-open="opened" datepicker-popup ng-model="date"/>
<span class="add-on" ng-click="openAction($e)" ><i class="icon-calendar"></i></span>
</div>
And then in the controller:
然后在控制器中：
$scope.openAction = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = !$scope.opened;
}
