我一直在寻找适合Angularjs的日期选择器,并决定使用pickadate.js
由于其精美的移动用户界面以及自定义指令以允许进行角度积分,如本博文中所示
http://www.codinginsight.com/angularjs-and-pickadate/
我想在上述博客文章中扩展该指令,并提供一个事件,以在值更改时调用控制器中的函数。扩展指令的完整代码如下所示
angular.module('plunker').directive('pickADate', function () {
return {
restrict: "A",
scope: {
pickADate: '=',
minDate: '=',
maxDate: '=',
change: '='
},
link: function (scope, element, attrs) {
element.pickadate({
onSet: function (e) {
if (scope.$$phase || scope.$root.$$phase) // we are coming from $watch or link setup
return;
var select = element.pickadate('picker').get('select'); // selected date
scope.$apply(function () {
if (e.hasOwnProperty('clear')) {
scope.pickADate = null;
return;
}
if (!scope.pickADate)
scope.pickADate = new Date(0);
scope.pickADate.setYear(select.obj.getFullYear());
// Interesting: getYear returns only since 1900. Use getFullYear instead.
// It took me half a day to figure that our. Ironically setYear()
// (not setFullYear, duh) accepts the actual year A.D.
// So as I got the $#%^ 114 and set it, guess what, I was transported to ancient Rome 114 A.D.
// That's it I'm done being a programmer, I'd rather go serve Emperor Trajan as a sex slave.
scope.pickADate.setMonth(select.obj.getMonth());
scope.pickADate.setDate(select.obj.getDate());
});
},
onClose: function () {
element.blur();
}
});
function updateValue(newValue) {
if (newValue) {
scope.pickADate = (newValue instanceof Date) ? newValue : new Date(newValue);
// needs to be in milliseconds
element.pickadate('picker').set('select', scope.pickADate.getTime());
} else {
element.pickadate('picker').clear();
scope.pickADate = null;
}
}
updateValue(scope.pickADate);
element.pickadate('picker').set('min', scope.minDate ? scope.minDate : false);
element.pickadate('picker').set('max', scope.maxDate ? scope.maxDate : false);
scope.$watch('pickADate', function (newValue, oldValue) {
if (newValue == oldValue)
return;
updateValue(newValue);
// call change function
scope.change;
}, true);
scope.$watch('minDate', function (newValue, oldValue) {
element.pickadate('picker').set('min', newValue ? newValue : false);
}, true);
scope.$watch('maxDate', function (newValue, oldValue) {
element.pickadate('picker').set('max', newValue ? newValue : false);
}, true);
}
};
});
我现在可以将此指令与change事件一起使用,如下面的HTML所示
<input type="text" pick-a-date="curDate" change="onChange()" />
它可以工作,但是一次更改会多次触发OnChange事件。关于如何使它仅启动一次的任何想法吗?我创建了一个插件来演示这个问题
http://plnkr.co/edit/3NcaAknd4GpelJxHWUyv
单击文本字段,然后选择一个日期。您将看到计数器变量已针对单个日期更改多次更新。
正如@miqid建议在指令和控制器之间绑定功能时使用'&'
('='
应仅用于在指令和控制器之间绑定作用域变量。)
另外,还需要对当前代码进行另一项更改。函数scope.change inupdateValue()
未得到执行,因为它已被引用为scope.change。这必须更改为scope.change()
。
我已将您的pl子分叉并对其进行了修改,以解决上述更改。
固定工作的插头:http ://plnkr.co/edit/oEpOxE21dXre28FpKoMc?p=preview
计数器仅更改一次即可更改。让我知道是否有帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句