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 相关文章推荐
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
TensorFlow高效读取数据的方法示例
2018/02/06 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
keras中的backend.clip用法
2020/05/22 Python
料理师求职信
2014/01/30 职场文书
事务机电主管工作职责
2014/02/25 职场文书
实习协议书范本
2014/04/22 职场文书
毕业设计说明书
2014/05/07 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
降价通知函
2015/04/23 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
Python实现信息管理系统
2022/06/05 Python