Angularjs中使用layDate日期控件示例


Posted in Javascript onJanuary 11, 2017

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条件判断使用小技巧总结
Sep 08 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
JS验证不重复验证码
Feb 10 Javascript
H5上传本地图片并预览功能
May 08 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
web打印小结
Jan 11 #Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 #Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 #Javascript
AngularJS中的缓存使用
Jan 11 #Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
You might like
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
Javascript实现字数统计
2015/07/03 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
总结js函数相关知识点
2018/02/27 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
决策树的python实现方法
2014/11/18 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python简易远程控制单线程版
2018/06/20 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
公积金转移接收函
2014/01/11 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
家属答谢词
2015/01/05 职场文书
学校节水倡议书
2015/04/29 职场文书
永不妥协观后感
2015/06/10 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers