jQuery angularjs 的 Bootstrap datepicker 指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19481003/
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
Bootstrap datepicker directive for angularjs
提问by Deepankar Bajpeyi
I have written a simple datepicker directive. Here is the code :
我写了一个简单的日期选择器指令。这是代码：
appDirective.directive('datePicker', function() {
return {
restrict: 'E',
require: ['ngModel'],
scope: {
ngModel: '='
},
replace: true,
template:
'<div class="input-group">' +
'<input type="text" class="form-control" ngModel required>' +
'<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +
'</div>' ,
link: function(scope, element, attrs) {
var input = element.find('input');
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(),0,0,0,0);
console.log(now);
console.log(nowTemp);
input.datepicker({
format: "yyyy-mm-dd",
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
});
element.bind('blur keyup change', function() {
scope.ngModel = input.val();
console.info('date-picker event', input.val(), scope.ngModel);
});
}
}
});
This triggers the datepicker if I use <date-picker></date-picker>in html.
如果我<date-picker></date-picker>在html.
However in the above directive the callback for onRenderdoesn't work. I am using the same example as Disable bootstrap dates
但是在上面的指令中，回调onRender不起作用。我使用与禁用引导日期相同的示例
What am I doing wrong here ?
我在这里做错了什么？
Thanks :)
谢谢 ：）
采纳答案by tennisgent
The onRenderfunction isn't a callback, its an event that is fired. The example they use in the docs you referenced is:
该onRender函数不是回调，它是一个被触发的事件。他们在您引用的文档中使用的示例是：
$('#dp5').datepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() < startDate.valueOf()){
....
}
});
So you should be adding an event listener, rather than supplying a callback function. Do something like this:
所以你应该添加一个事件监听器，而不是提供一个回调函数。做这样的事情：
input.datepicker()
.on('onRender', function(ev, date){
return date.valueOf() < now.valueOf() ? 'disabled' : '';
});
The docs are a little fuzzy as to what exactly is passed along as part of the 'onRender'event, but i'm pretty sure that should work. If you aren't passed the date object, you might have to read it from the input before formatting it.
文档对于作为'onRender'事件的一部分传递的内容有些模糊，但我很确定这应该有效。如果您没有传递日期对象，则可能必须在格式化之前从输入中读取它。
回答by Olivier
There is a working native implementation in AngularStrapfor Bootstrap3 that leverages ngAnimatefrom AngularJS v1.2+
AngularStrap 中有一个适用于 Bootstrap3 的本地工作实现，它利用ngAnimate了 AngularJS v1.2+
You may also want to checkout:
您可能还想结帐：
If you prefer to keep relying on TwitterBootstrap javascript, there is the old version that just does that:
如果您更喜欢继续依赖 TwitterBootstrap javascript，那么旧版本就是这样做的：
