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 相关文章推荐
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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
php获取数组中重复数据的两种方法
2013/06/28 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python类定义和类继承详解
2015/05/08 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python同步windows和linux文件
2019/08/29 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
高一英语教学反思
2014/01/22 职场文书
新闻学专业求职信
2014/07/28 职场文书
婚庆答谢词
2015/01/04 职场文书
政府会议通知范文
2015/04/15 职场文书
《山中访友》教学反思
2016/02/24 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
Java获取字符串编码格式实现思路
2022/09/23 Java/Android