未加星标

Angularjs中使用layDate日期控件示例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
layDate 控件地址:http://laydate.layui.com/

前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的。后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件。

解决思路:将layDate的初始化及相关代码定义在指令里。

问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值。

指令具体代码:

/**
* 使用示例
* <input def-laydate type="text" id="id1" ng-model="startTime"/>
*/
app
.directive('defLaydate', function() {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '='
},
link: function(scope, element, attr, ngModel) {
var _date = null,_config={};
// 初始化参数
_config = {elem: '#' + attr.id,format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',min:attr.hasOwnProperty('minDate')?attr.minDate:'',choose: function(data) { scope.$apply(setViewValue); },clear:function(){ ngModel.$setViewValue(null);}
};
// 初始化
_date= laydate(_config);


// 模型值同步到视图上
ngModel.$render = function() {element.val(ngModel.$viewValue || '');
};
// 监听元素上的事件
element.on('blur keyup change', function() {scope.$apply(setViewValue);
});
setViewValue();
// 更新模型上的视图值
function setViewValue() {var val = element.val();ngModel.$setViewValue(val);
}
}
}
})

---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="startTime"/>

注意:1.指令只能用做元素属性。2.元素必须要有唯一id属性。

 到此为止,在Angularjs里使用laydate的基本目标实现了。但是,日期组件难免会有日期选择范围限制的要求,比如日期可选的最大值,最小值。现对指令做优化以满足要求:

app.directive('defLaydate', function() {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '=',
maxDate:'@',
minDate:'@'
},
link: function(scope, element, attr, ngModel) {
var _date = null,_config={};
// 初始化参数
_config = {elem: '#' + attr.id,format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',max:attr.hasOwnProperty('maxDate')?attr.maxDate:'',min:attr.hasOwnProperty('minDate')?attr.minDate:'',choose: function(data) { scope.$apply(setViewValue); },clear:function(){ ngModel.$setViewValue(null);}
};
// 初始化
_date= laydate(_config);

// 监听日期最大值
if(attr.hasOwnProperty('maxDate')){attr.$observe('maxDate', function (val) { _config.max = val;})
}
// 监听日期最小值
if(attr.hasOwnProperty('minDate')){attr.$observe('minDate', function (val) { _config.min = val;})
}

// 模型值同步到视图上
ngModel.$render = function() {element.val(ngModel.$viewValue || '');
};
// 监听元素上的事件
element.on('blur keyup change', function() {scope.$apply(setViewValue);
});
setViewValue();
// 更新模型上的视图值
function setViewValue() {var val = element.val();ngModel.$setViewValue(val);
}
}
}
})

 ---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="startTime"  max-date="{{model.max}}" min-date="{{model.min}}"/> min-date,max-date属性按需添加。

这样的指令一般情况下已经可以满足使用,但是在结合ngDialog使用时出现了问题:layDate在初始化中getElementById 获取元素时,弹窗中的html内容还没有持到页面的结点树中,故而报错。

于是希望指令的link代码可以在弹窗渲染后再执行,查找资料后,在指令中引入了$timeout:

app.directive('ngcLayDate', function($timeout) {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '=',
maxDate:'@',
minDate:'@'
},
link: function(scope, element, attr, ngModel) {
var _date = null,_config={};
// 渲染模板完成后执行
$timeout(function(){ // 初始化参数 _config = { elem: '#' + attr.id, format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD', max:attr.hasOwnProperty('maxDate')?attr.maxDate:'', min:attr.hasOwnProperty('minDate')?attr.minDate:'', choose: function(data) { scope.$apply(setViewValue); }, clear:function(){ ngModel.$setViewValue(null); }};// 初始化_date= laydate(_config);// 监听日期最大值if(attr.hasOwnProperty('maxDate')){ attr.$observe('maxDate', function (val) { _config.max = val; })}// 监听日期最小值if(attr.hasOwnProperty('minDate')){ attr.$observe('minDate', function (val) { _config.min = val; })}// 模型值同步到视图上ngModel.$render = function() { element.val(ngModel.$viewValue || '');};// 监听元素上的事件element.on('blur keyup change', function() { scope.$apply(setViewValue);});setViewValue();// 更新模型上的视图值function setViewValue() { var val = element.val(); ngModel.$setViewValue(val);}
},0);
}
};
})
OK,问题解决。解决问题的过程伴随着查资料的过程,是一步步完善的。也希望大家在遇到同样的问题时少走弯路

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Angularjs中使用layDate日期控件示例
本站链接:http://www.codesec.net/view/524318.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(66)