使 AngularUI 日期选择器成为实际指令 [英] Making AngularUI datepicker an actual directive
问题描述
我正在尝试将 angular-ui 的日期选择器 变成一个实际的指令.
I'm trying to turn angular-ui's date-picker into an actual directive.
我可以使用正确的模型和格式在页面上显示它,但切换对我不起作用(尝试通过属性命名).
I can display it on the page with the correct model and format, but the toggling doesn't work for me (trying to name it via the attributes).
这是我的代码:我的html
Here is my code: My html
<date-picker data-format="dd/MM/yyyy" data-model-name="dateReviewed" data-ng-model="oneWMS.dateReviewed" data-status="statusDateReviewed" data-opened="openDateReviewed"></date-picker>
我的指令
function datePicker() {
return {
restrict: 'AE',
require: 'ngModel',
scope: {
format: '@',
mod: '=ngModel',
status: '@',
opened: '@'
},
template: '<div class="input-group">' +
'<input type="text" class="form-control" datepicker-popup="{{format}}" data-ng-model="mod" is-open="status.opened" ng-required="true" close-text="Close" />' +
'<span class="input-group-btn">' +
'<button type="button" class="btn btn-default" ng-click="opened($event)"><i class="glyphicon glyphicon-calendar"></i> </button>' +
'</span>' +
'</div>',
link: function(scope, iElement, iAttrs) {
// all the directive code
console.log(iAttrs.format); // dd/MM/yyyy
console.log(iAttrs.ngModel); // oneWMS.dateReviewed
console.log(iAttrs.status); // statusDateReviewed
console.log(iAttrs.opened); // openDateReviewed
console.log(iAttrs.modelName); // dateReviewed
var modelStatusDate = iAttrs.status;
var modelOpenDate = iAttrs.opened;
var modelName = iAttrs.modelName;
scope.today = function() {
scope.modelName = new Date();
scope.dateApproved = new Date();
scope.today();
scope.clear = function () {
scope.modelName = null;
};
scope.modelOpenDate = function($event) {
scope.modelStatusDate.opened = true;
};
scope.modelStatusDate = {
opened: false
};
scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i=0;i<scope.events.length;i++){
var currentDay = new Date(scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return scope.events[i].status;
}
}
}
return '';
};
} // link
} // return
} // picker
}
不知道是只是打开选择器不起作用还是日期选择也会失败.
Don't know if just opening the picker doesn't work or if the date selecting will fail as well.
推荐答案
我使用 angularui 日期选择器创建了一个自定义日期指令.看看吧,也许对你有用.这是 plunkr 网址.http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp.
I have made a custom date directive using angularui date-picker. Have a look, it might be useful to you. Here is plunkr url . http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp.
这篇关于使 AngularUI 日期选择器成为实际指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!