网站优化

小程序分销设置_Angularjs中使用layDate日期控件示例

作者:admin 发布时间:2021-01-12
Angularjs中使用layDate日期控件示例       本篇文章主要介绍了Angularjs中使用layDate日期控件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

指令具体代码:

 * 使用示例
 * input def-laydate type="text" id="id1" ng-model="startTime"/ 
 .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);

---以上代码使用示例为 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,问题解决。解决问题的过程伴随着查资料的过程,是一步步完善的。也希望大家在遇到同样的问题时少走弯路

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



收缩